Then there was jQuery, and I did a little bit with that, like accordions to cut the space occupied by what had been growing heavily styled nested lists full of links. Oh, and scripting for the rounded corners too. And then <canvas> in some browsers, while having to feed SVG or VML to the rest either explicitly or through a wrapper library.
But that was all a while ago, and I felt it was time to start playing with the new things we can do that had been passing me by -- HTML5/CSS3, more semantic mark up, webfonts rather than image-substitution, with symbol fonts for icons, CSS3 effects (so we can do script free accordions like we used to do script-free drop-downs) -- and see what we can get away with these days, which changing the rather stale aesthetic of textured backgrounds and hard delineations.
So, getting to the point, I hit a CSS3 gotcha when trying to push the envelope. What I was after was to style a navigation list with a symbol font right-arrow in a circle at the start. So I tried this:
And I was disappointed to see Firefox render a little circle, then a placeholder glyph from the text font in use, then the list content -- whereas IE9 did exactly what I wanted, and Opera 11.6 drew a square around the arrow rather than a circle, even though all three browsers draw an arrow in a circle if I put the appropriate HTML escape in a span and style that. After some experimentation, it seems that Firefox will not put the glyph in the border, nor use the symbol font, for symbols in the private use area unicode range. And Opera 11.6 will use a square outline regardless.
So I can have a pure CSS solution with not quite the glyph I want, and in some browsers, not the outline; or I put the symbol I want in explicitly or by script. Or maybe some combination.
Still have to try it in a Webkit browser, mind you.
Later: experiments with other code points (abandoning the symbol font) shows that letter forms do get circled by this technique in Firefox, but symbol ranges e.g. Mathematical Arrows don't.Even later: Chrome, as a representative webkit, doesn't show any glyph at all -- just the border! Looks like I might have to do this by script.Even later yet: I ended up doing it with an image.