Adding context to in-page links using CSS3’s :target pseudo-class
Here’s a less-than-stellar usability situation that’s plagued the WWW for years.
A reference manual or guide is published on the Web as a single HTML page. It’s a large page, many screens long, with a table of contents and in-page anchor links that take you to points in the page (perhaps even “chapters”). Maybe the page is littered with “return to top” links. In any case, all of the navigation is contained within the single page.
It’s entirely appropriate to publish this manual as one document, but now you want to send your friend a link to Chapter 3, Section 1 to answer his question. That will take him to the middle of this long, long page. That’s efficient, yes, in that it will take your friend right where he needs to go on the page. But it’s also potentially confusing; he clicks on the link and wonders, “What page is this? Where am I? What manual is this? Who published this?”
Solving the “In-page anchor problem” with CSS
Now I’ve come across a handy CSS trick to solve this problem. It’s been in the back of my mind for years, so it gives me a special satisfaction to explain it.
Via Andreas at wg, we can use the CSS3 :target pseudo-class to selectively display text. That way, we can add contextual information to headings that is revealed only when these headings are directly linked to by in-page links.
For example, let us consider the above example of an instruction manual. If Chapter 3, Section 1 is entitled “Assembly Instructions,” that’s doesn’t tell us anything about what we’re assembling.
- http://www.site.com/manual.html
- 3.1: Assembly Instructions
But we can context. Now we know we’re assembling a remote-controlled car, not a 747 jet.
- http://www.site.com/manual.html#chap3sec1
- 3.1: Assembly Instructions for the Acme remote-controlled car
Implementation
The selective display of text can be done a couple of ways. For me, with Movable Type, it was simplest to do with display:none, although this is not the most efficient nor most accessible of methods. A full description of this implementation is available at web-graphics, and you should go there for the gory details.
If you have easy access to the <head> area of your HTML document, you may want to stack the :target and :after pseudo-elements and use the content property. This places all of the content generation in the CSS domain. I tested this successfully in Mozilla, but I can’t vouch for it in Safari, Omniweb, or Konqueror. (If you can, leave a comment!) Here’s the code; it’s quite clean.
content: “contextual information”;
}
More information on :after and content are available at westciv.
Browser notes
According to MacEdition, the :target pseudo-class is supported in the following browsers: Mozilla 1.4+ (includes Firefox 0.9+, I believe), Safari 1.0, OmniWeb 4.5, Konqueror, and MSN for Mac OS X (hey, I don’t even know what that is). Anything else, such as Internet Explorer, will not display the extra contextual information.
See it on my site
I put my money where my mouth was and implemented this on my site. Note the difference in a link to the blog entry “Brown and Orange” versus a direct, in-page link to comment on the entry. You’ll see contextual information in the “Comments” heading if you click the second link, provided you’re using a supported browser.
December 29th, 2004 at 9:23 am
Thanks for your comment, Tom. It’s nice to see an implementation of the technique I described over at Web-Graphics. See my own blog for another real-world example.