Accessible ID

Original Experiment Date
October 25, 2003 (probably earlier)
Description

This experiment was born from a frustration. I had written my M2 Tutorial and occasionally would ask a question about M2 and I would link to a specific section of the tutorial. Or, when linking to the CSS specifications one would want to link to a specific section explaining the property. This is possible by linking to the #id of the appropriate header. However, often one would have to look at the source before being able to find the correct value, making it quite a hassle.

Not anymore with this technique. By making the #id value available upon hover with h2[id]::hover { content: "#" attr(id); } it becomes much easier to link to the appropriate section. Just copy the #id value to the addressbar, and you can directly link to the appropriate section.

Test
All webpages on this site use this technique — just hover a header. It is also used on other sites, such as the official Opera M2 tutorial.
Advantages
Easier linking to a specific section of a webpage.
Disadvantages
None.
Browser support
Opera 7+, Gecko-based.

© 2003-2006, Mark Schenk.