More body ID fun

Scott Andrew points out another smart trick with body tag ID attributes—selectively showing and hiding navigation elements depending on the current page. This is a really neat idea, but it does lead to a blurring of the lines between structure and presentation—if a navigation section isn’t relevant to a particular page this should be mirrored in the markup rather than worked around by the CSS. That said, there are some nice presentational touches which could be achieved with this technique without sacrificing structural purity, such as highlighting the navigation menu item for the current page in a different colour:

body#aboutpage li#aboutlink {
  background-color: red;
  color: white;
}

<body id="aboutpage">
...
<ul class="subnav">
 <li id="newslink"><a href="/news/">News</a></li>
 <li id="aboutlink"><a href="/about/">About</a></li>
 <li id="contactlink"><a href="/contact/">Contact</a></li>
</ul>
...
</body>

But then I suppose you could argue that the link to the current page shouldn’t be a link at all.

Posted 21st January 2003 at 9:19 pm

3 comments

Talk about a bandwidth waster though.. what if you need to do this for 10 navigation links? 20? Then there's the weight of the unnecessary markup in the pages (both the id or class on the body element and the links that shouldn't be). I'd prefer to write a simple regex to parse out the current nav link and turn it into a mere list item.
Lach - 22nd January 2003 00:50 - #
I don't think it would be too much of a bandwidth waster - you're still only serving up one stylesheet at the start of the user's session and the added markup isn't that much (a few attributes), especially when you consider the huge amount of bandwidth saved by goign with CSS for layout instead of tables in the first place. Your solution does sound preferable if the page is being created by a CMS (as most pages will be). It's still a fun technique to stick in the toolbox though.
Simon Willison - 22nd January 2003 01:01 - #
If you are only doing presentational effects, and don't mind IE and Opera users missing out then you don't need the extra ids in your markup. You can use css attribute selectors instead: body#aboutpage ul.subnav a[href="/links/"] {...}
paul hammond - 22nd January 2003 11:00 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/01/21/moreBodyIdFun

Simon Willison’s Weblog

More body ID fun

3 comments