Summary

CSS Signatures are a great way to empower users. For visitors that use user-defined style sheets, they provide a mechanism to specifically target your website without affecting any other website they visit.

Author: Gez Lemon

In his presentation at @Media 2005, Douglas Bowman casually mentioned CSS Signatures. Eric Meyer wrote an article about CSS signatures on CSS Discuss a few years ago. The basic idea is that you add an id attribute to the body element so that visitors can customise their experience for your website with a user style sheet. This is particularly useful in terms of empowering users, as it allows visitors to maintain a generic user style sheet, with specific styling for your website. The basic idea is that you swap the dots with hyphens for the base URL of your site, and use it as the value for the id attribute. 

<body id="juicystudio-com">

Visitors can then target your website specifically in their user-defined style sheet. 

#juicystudio-com *
{
    font-size: 1.6em;
    color: #000;
    background: #ffc;
}

The example here is over-simplified. They could do much more powerful things, such as reposition elements, or remove them completely, without affecting any other website they visit. For example, if someone didn't like the sidebar on this site, they could use the following: 

#juicystudio-com #content
{
    float: none;
    width: 100%;
}

#juicystudio-com #sidebar
{
    display: none;
}

Douglas' example used a class instead of an id, which didn't make sense to me. An id has higher specificity than a class, so on the surface, appears to be a more appropriate choice. Of course, an id must be unique on the page, meaning that it couldn't appear elsewhere in the document. Again, this seems sensible, or there would be a risk that values could be inherited if the class name was used elsewhere on the page, resulting in compounded rules that may not have the desired effect. I wanted to ask the reason for using a class instead of an id, but wasn't selected at question time. Douglas is really switched on when it comes to CSS, so I suspect there probably is a good reason that I'm not aware of. If anyone knows why a class may be more appropriate, I am very interested to hear the reasoning.

Thank you to Patrick and Roger; Doug did use an id for the signature, and a class to switch layouts, which makes perfect sense.

Category: Style.

Comments

  1. [css-selectors.php#comment1]

    i might be recalling it incorrectly, but i think doug only used a class for the body to switch layouts ("mx", "xm", etc) so that the id is still available should you wish to give a css signature ... or something along those lines.

    Posted by patrick h. lauke on

  2. [css-selectors.php#comment2]

    After reading Eric's article, I was curious to see what the body element currently looks like on his pages at http://meyerweb.com/ and I found the id attribute of "www-meyerweb-com". The body element also has a class attribute, which seems to designate the section for each page. The class is used in conjunction with the navigation link id attribute to change the border, background, and font colors as well as italicize the text so the section in the navigation bar stands out. Although I find this interesting, I'm not sure it addresses your question about the reason for using a class rather than an id attribute *smile*

    In doing some more research, I discovered Richard Rutter mentioned, in one of his articles http://www.clagnut.com/blog/362/, he was already using the id attribute for something else. Could it be, in certain cases, class is used as the CSS signature because id is otherwise engaged?

    Posted by Pam on

  3. [css-selectors.php#comment3]

    Patrick got it right. Doug did use id for the CSS signature because of its higher specificity, and class for the different layouts.

    Posted by Roger Johansson on

  4. [css-selectors.php#comment4]

    Ah, thank you all; that makes sense. I knew there would be a good reason, but I missed the id on the body and only noticed the class.

    Posted by Gez on

  5. [css-selectors.php#comment5]

    I had a class/id debate at work last week...

    My personal preference is to always use classes. This way if you copy/paste a column/box/table/etc., you don't have to worry about duplicate IDs. Even on things I know there'll only be one of (content, leftNav, footer etc.), I don't see any reason to swap when I can keep things all the same!

    The only argument they came up with at work was something when Firefox "worked with ids, but not classes", which I'm positive was just another more specific rule they had overriding (Dom Inspector? What's that?)

    I've never had problems where I've had to make things more specific (or use !important), so I don't see any advantage in using ids other than remembering which is which (navbox = class, nav = id ?!)

    Posted by Danny Tuppeny on

  6. [css-selectors.php#comment6]

    In XHTML 1.0, you can use the id attribute on the html element instead. It might be useful since the background for the body element doesn't cover the canvas in XML.

    In Firefox 1.1 (and recent nightlies) you can use the @-moz-document rule, e.g.: 

    @-moz-document domain(juicystudio.com){
 * { background:white !important; color:black !important; }
}

    See "per-site user stylesheet rules" [http://lists.w3.org/Archives/Public/www-style/2004Aug/0135.html] *smile*

    Posted by zcorpan on

  7. [css-selectors.php#comment7]

    Thank you for the information zcorpan - that is very useful to me for sites I visit without signatures *smile*

    Posted by Mary on

  8. [css-selectors.php#comment8]

    Really, ID attributes should be put on root. (I wrote about that quite a lot.)

    Posted by Anne on

  10. [css-selectors.php#comment10]

    Blogging and sigs are a more recent Internet phenomenon, fueled by its creation ease, but in retrospect not different from the era of GeoCities, which empowered everyday citizens to rise up against the perceived tyranny of commercialism, which if unchecked would leave all but those who were powerful and moneyed, in control of the peoples medium. In each era (but in continuance) the value of linking one piece of information to another recognized the tremendous value of "the web" and the interconnection that intelligently linked an endless chain of consciousness. Following this truism every corporate site would become a leader of relevant information in their respective fields of endeavor; each individual web site would compliment each component or link; the relevance of ideas and thoughts separating fact from opinion would empower those who seek information for whatever purpose.

    Posted by Denny Lancaster on

Comments are closed for this entry.