1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Css role attribute and classes

Discussion in 'CSS' started by saadi123, Jan 24, 2011.

  1. #1
    Hey gurus!!!

    I need to know that what is the purpose of css role attribute?
    I've read few articles, but all went above my head. I mean the articles are too heavily loaded with technical jargon which make them difficult to understand for a dummy like me. Please any one tell me with simplicity and if possible through illustrations.

    Secondly I want to know that why do in some places an id is assigned to a class in css. For eg <div class="any_class" id=any_id">, I mean what's the point of assigning id to a class?
     
    saadi123, Jan 24, 2011 IP
  2. Dodger

    Dodger Peon

    Messages:
    1,494
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I don't know much 'bout Biology or the role class, but ID's and Classes is pretty straight-forward.

    First rule is that IDs are unique, Class is not. A page with an ID used more than once will not validate.

    ID's usually "hook" a certain part of the page (ie: header, navigation, content, footer) or define a section that is otherwise unique (ie: related posts, comments, header ad banner, footer ad banner ). Think of the IDs as major groupings of content areas that are unique onto themselves.

    Classes are hooks into repetitive elements on the page, that may occur one or many times or are a subset of a grouping (ie: navigation menu items, widget titles, widget list items, a single comment ) You want consistency between common elements, so you "classify" them as such.

    IDs come in handy with plugins. The plugin in itself is unique to the page, so the author of the plugin will identify enclosing DIV of it's output with its own ID. This ID can be used to sub-class all of its elements uniquely (ie: #pluginXid ul li { color:red; } ) without messing up any other uniquely identified elements on the page (ie: ul li {color: black;} or .special-class ul li {color: blue;})

    A very old, but still applicable article worth reading The Difference Between ID and Class | CSS-Tricks
     
    Dodger, Jan 24, 2011 IP
  3. saadi123

    saadi123 Well-Known Member

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Thanks buddy. That helped a lot. But still looking for role attribute
    :-(
     
    saadi123, Jan 25, 2011 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Roles have little to do with CSS, except that you *could* use them as styling hooks... in browsers who understand attribute selectors.

    somediv[role="banner"] {styles;}

    I don't do this because I must support Internet Exploder.

    Roles are something from XHTML2 that now is being developed as ARIA-roles. There are mostly for accessibility purposes: screen reader users can be given more information about what an element is for.

    http://dev.opera.com/articles/view/introduction-to-wai-aria/

    Since browsers and AT (accessibility Technology) are still being built to deal properly with roles, the only ones I've used so far as the Landmark roles. They're easy to use (if your page is semantically written) and rather simple.

    http://www.paciellogroup.com/blog/?p=106 <--very easy article

    Just remember that these landmark roles should be treated like id's, in that there should be only one of each type per page. So the "nav" role should be reserved for the PRIMARY site navigation, even if you have other navigation lists on that page, and the "search" role should be the PRIMARY site search.

    Default roles are being added to browsers, meaning that HTML elements are getting roles even if you don't know it. If you want to use roles you will have to learn what the ARIA authors are setting as defaults, because you don't want them to conflict. For example, <button> elements have the role of "button" (pretty obvious).

    If you're using HTML5 elements, for example the <nav> element has a role of "nav". I do not mix ARIA roles with HTML5 because this is still *very* buggy. I would stick to HTML4 or XHTML1 if you want to use roles, for now.
     
    Stomme poes, Jan 28, 2011 IP
  5. saadi123

    saadi123 Well-Known Member

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    Thanks buddy. Especially the articles linked here helped me a lot in gaining some understanding.
     
    saadi123, Jan 29, 2011 IP
  6. Simcat

    Simcat Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Say for example if you want to target just the main header and footer tags without also styling the inner tags? You could drop some IDs in your page. Ideally the ID attribute is to be used sparingly. This is where the Role Attribute and be used as a hook instead.

    This avoids a plague of otherwise meaningless ID attributes.

    Please see screen shots. Hope this helps.
     

    Attached Files:

    Simcat, Jul 26, 2012 IP