dionidium.com

Wayne Burkett's Weblog | Home

Moving Forward with CSS

01:48AM CST June 27, 2003

Andreas Bovens's From Footnotes to Sidenotes is a nice, forward-looking use of CSS to display footnotes in HTML documents. Due to poor support for CSS3 pseudo-selectors, this solution currently works only in Gecko browsers, but degrades nicely to show footnotes inline in older browsers. A couple notes:

As Brad Choate pointed out, this technique "breaks" the back button. Because the footnotes are basically links, the browser's back button will scoll through each footnote you've viewed.
This technique introduces some unexpected copy/paste behavior. We copied the words "CSS3 (pseudo-)selectors" from the example page and pasted them into our weblogging software. What we got was this: "CSS3 [CSS3 stands for Cascading Style Sheets level 3 and is still under development. It allows for strong visual control over elements on webpages.] (pseudo-)selectors." Copying lifted the words we wanted plus the footnote, which we didn't ask for and didn't really want.

We used Mozilla Firebird 0.6 to view the examples, which, incidentally, is a smashing browser.

Several webloggers, most notably Dave Shea, have recently commented on using CSS3 selectors in ways that take advantage of current browser support, but that degrade gracefully in browsers like Internet Explorer 6, which has limited support for advanced CSS. We view From Footnotes to Sidenotes as a fine step in this direction.