Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Fun with body IDs

Mark has hit on the clever idea of using the body tag’s id attribute to apply different styles to different pages all from the same stylesheet. The technique is very neat, but it would be even neater if he combined it with Eric Meyer’s CSS Signatures to allow advanced users to specify their own styles for his site. Since the ID attribute can’t be overloaded with more than one value doing so would probably mean having to use the body tag’s class attribute as well—the id attribute could hold the signature while the class attribute specified the page (or vice versa).

Posted 16th January 2003 at 10:03 pm

This is Fun with body IDs by Simon Willison, posted on 16th January 2003.

View blog reactions

Next: Who needs web standards?

Previous: PEAR out of beta

11 comments

  1. What about setting an ID to the HTML element? I don't know of any browser incopatibilities, but it should function the same way as setting it on the BODY. Besides, the entire HTML is part of the site and any DOM tricks that a user would like to achieve can also be written specifically for one site, using the ID on the HTML element to have full access to every element in the document. Also, once set on the HTML element, an ID on the body for other purposes, will do no harm. html#www-meyerweb-com body { ... }

    Kris - 16th January 2003 22:17 - #

  2. Good point - I hadn't thought of that. The body tag is the "standard" place for a CSS signature but there's no reason at all that the signature ID couldn't be attached to the HTML element instead.

    Simon Willison - 16th January 2003 22:23 - #

  3. According to http://archivist.incutio.com/css-discuss/?id=13807 ids on HTML aren't allowed?

    Stuart Langridge - 17th January 2003 10:52 - #

  4. From the XHTML1.0 spec:

    
<!ELEMENT html (head, body)>
<!ATTLIST html
  %i18n;
  id          ID             #IMPLIED
  xmlns       %URI;          #FIXED 'http://www.w3.org/1999/xhtml'
 >

    Looks like ID is legal.

    Kris - 17th January 2003 11:25 - #

  5. Actually, the id attribute is only legal in XHTML. HTML 4 and older don't allow it.

    And how exactly is this any better than <body id="my-domain-name" class="news" />?

    Jan! - 17th January 2003 11:43 - #

  6. It's better because it lets you style elements in the <head> as well.

    Anyway, I've been using classes on <body> for like ever. :-) e.g. my blog puts class="index" on ln.hixie.ch if you are looking at it with the default settings (last ten entries).

    Ian Hickson - 17th January 2003 12:35 - #

  7. I've used body classes to allow me to use multiple designs with a single .css for a while. I've tried using IDs but you can use as many classes as you want on the same tag which makes it very flexible.

    Xian - 17th January 2003 19:21 - #

  8. Xian. That is true. I hadn't thought of that yet. Still, the ID can remain on the HTML element (in XHTML documents, as Jan! points out).

    Kris - 18th January 2003 16:55 - #

  9. iwantto make friends in india

    ashar - 29th January 2004 06:32 - #

  10. Hi. I've also been using the ID / class on the body for some time now. I use it for navigational purposes. I.e. by adding a rule in my stylesheet related to the body that's being shown, I can make a menuitem take on a different colour than the rest of the menuitems. This way the user knows in which part of the website he/she is at. Instead of breadcrumbs and the likes... Also I've implemented this idea into another website where I use CSS-tabs. This is also a style-matter. The tab needing to overlap to actually make it look like a tab, is defined in the stylesheet related to the body ID/class I'm in. Do you follow? Anyway, it's a good idea, especially when one doesn't have an application server or the likes to take care of these things...

    Sebastiaan - 8th July 2004 17:27 - #

  11. why wouldn't you use multiple style sheets for different areas of a site? I certainly don't want an UBER style sheet with the styles for 3 or four page templates--seems to go AGAINST the entire idea of componentization of files for re-use. pretty stupid if you ask me, maybe it's useful for blawgers (who cares?) but for real site design, you'd be much wiser to break your style sheet up for different page layouts lest you waste everyone's time that needs to update h2s in the product detail style sheet (for instance.)

    sammy - 17th April 2006 20:50 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/01/16/funWithBodyIds

A django site