Quote this comment

Tony Posted…

I like it. I think it's fantastic. I like the sidebar adapation of the classic footnote. I'd also like to see the ability to see all footnotes for that page, even if it's only when I'm printing them out. I also think that it's a freakin' shame that we'll have to wait until 2006 (or whenever Microsoft upgrades) to be able to implement this broadly. Tony

Quote this comment

Brad Choate Posted…

Pretty nifty. I just have two minor nits. Browser support is pretty slim for now. But since it at least displays the footnote inline, it's not a total loss (although seeing all the footnotes sure makes the paragraphs cluttered). Second, it screws up the back button. At least in FireBird. So to navigate backwards, you have to click back through all footnotes you displayed. This is more annoying to me personally.

Quote this comment

pixy Posted…

Very nice. And, it *works* in Safari (!). Brad, the back-button's behavior is correct, I guess. You clicked a link, that's why it's added to the browser history. It works as well as if you clicked anchors within the page...

Quote this comment

CodeBitch Posted…

Just in time for the new MacEdition support chart for CSS3 selectors. http://www.macedition.com/cb/resources/css3support_selectors.html Some of these selectors are surprisingly well-supported. CB

Quote this comment

Lon Posted…

My dear collegue Sjoerd Visscher just made a version that works in all major browsers... although IE6 is having some problems now and then. http://www.q42.nl/demos/footnotes.html Furthermore it is my personal opinion that wining over IE6 not supporting this stuff until 2006 is compete bullshit. CSS is for styling. What you are trying to do here is abuse it for logic. One or two simple lines of JavaScript would solve the problem. You don't have to wait til 2006. You just have to use stuff that is widely available and use it the best way you can. And one more thing: the back-button behavior isn't correct. Clicking a link is clicking a link. Clicking a footnote isn't clicking a link to the user, although on a technical level it might be implemented that way. You shouldn't have to back your way through all footnotes. Brad is completely right. Lon

Quote this comment

Andreas Posted…

Thanks for all the comments! :-) Tony: I added a print stylesheet, which prints all footnotes inline (similar to the way it is displayed in IE and Opera). I don't see another possibility. About IE: indeed a pity. Brad + Pixy + Lon: I agree with Pixy about the Back-button behavior. The fixed position of the sidetab creates the illusion that the page doesn't move (which is usually the case with #-links), but that only the sidetab changes. Pixy + CodeBitch: cool it works in Safari, too. I browsed through the support chart and to my surprise, it also seems to work for MSN6 for OSX, which offers support for both attribute substrings (right?) and the :target pseudoclass. Can an OSX MSN6 user verify this? Lon: Interesting to see Sjoerd's implementation. However:

• It feels rather buggy in IE6 though. I don't manage to see the first sidenote.
• Refering to individual sidenotes is not possible, you really need to hover over them with the mouse.
• In my page you can navigate with the tab-button and press enter if you want to see the relevant sidenote.
• With Sjoerd's solution it is not possible to add a link to a sidenote, as the sidenote itself is embedded inside of an a-tag

I don't think I abuse CSS here. I even try to avoid abusing XHTML for styling, which cannot be said of Sjoerd's solution. His links are not clickable nor refer to an existing id, and are only there to compensate for IE6's lack of support for the :hover pseudoclass.

Quote this comment

Bas Posted…

I really like the idea of sidenotes, but I was not satisfied with the structural markup. So I copied your source code and converted all links and it's descriptive spans into a definition list <dl>. The idea was simple: the definition type <dt> is the text that links to the sidenote, the definition description <dd> is the sidenote itself. Semantically great, unfortunately this breaks the layout. A definition list is a block element. It is of course possible to make it display inline using CSS (and it actually worked as well!) but the code won't validate because a paragraph can't contain block elements. So my experiment came to an end. I'm going to think it over one more time, when I think of something to work around this problem I'll be sure to post it here, since it's your idea in the first place. You deserve the credit for it, great job!

Quote this comment

Wayne Burkett Posted…

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. Very nice, however.

Quote this comment

Mike Posted…

Hi there, I've been teaching myself to use CSS for page layout, and pretty successfully I think. I had actually found your page on footnotes to sidenotes looking for a way to implement footnotes and like your comments so much I went ahead and implemented them. Look for the link "of course" in one of the paragraphs on this page. I got some inspiration from opera.com and webreference.com.

Thanks for your help,
Mike

Quote this comment

Andreas Posted…

Rui Nibau recently wrote an extensive review of this technique and also proposes an alternative approach.