161 items tagged “css”
2003
Defending Structural Markup
I’ve been somewhat taken by surprise by the latest round of anti-CSS rants (initiated by JWZ, followups all over the place), mainly because I’ve been using CSS for long enough now that I’d started to forget about the legions of web developers out there who haven’t yet realised what they’re missing. Instead of getting stuck in to dissecting other people’s complaints I’m just going to lay down a few of my own core beliefs.
[... 841 words]getElementsBySelector()
Inspired by Andy, I decided to have a crack at something I’ve been thinking about trying for a long time. document.getElementsBySelector is a javascript function which takes a standard CSS style selector and returns an array of elements objects from the document that match that selector. For example:
Safari conditional comments
The current extended discussion over whether or not Safari should have some kind of specific CSS blocking technique built in (sparked off by Mark Pilgrim) reminds me of a relatively unpublicised feature of Internet Explorer called conditional comments. These specially crafted HTML comments allow web authors to specifically hide code from versions of IE, or alternatively to hide code from any browsers that are not a specified version of IE. Here’s how they work:
[... 198 words]2002
Blockquote citations
Inspired by Adrian Holovaty, I spent an hour this morning getting dirty with the DOM in an effort to replicate his funky CSS blockquote citations effect but with links that you can actually click on. The resulting code is now active on this weblog—check the javascript out here.
[... 86 words]Partner as a case study
I’ve been helping my partner Natalie Downe recreate her site using CSS and structural markup. She’s new to web design and has been taking to CSS like a duck to water—as a veteran of Microsoft Word globally defined styles come to her naturally and she took very little time to cotton on to the importance of seperating presentation from content. I’ve shown her tables as well but she isn’t really interested as she sees CSS as a much better solution for general presentation. I’m hoping to help run an HTML/XHTML/CSS training course at the University early next year with a heavy emphasis on structural markup, standards compliance and accessibility so it’s great to have a guinea pig to play with :)
[... 203 words]Taming lists
In CSS Design: Taming Lists, Mark Newhouse explains in detail every CSS list trick in the book, including inline lists, nested breadcrumbs and a variety of other useful techniques. He also links to Eric Meyer’s essential DevEdge article Consistent List Indentation which explains how to deal with the differences between list indentation in Internet Explorer and Mozilla.
CSS in the real world
Adrian Holovaty: CSS in the real world. Adrian uses CSS to reduce the markup for a list of news headlines by 75%:
[... 56 words]Pretty link on Kottke
In a discussion on css-discuss recently about underlines a on links, I pointed to kottke.org as an example of clever use of CSS for links where by the link underline is a slightly later colour than the link text. Today, Jason explains the technique and the thinking behind it.
Accessible fonts
Mark has out-done himself today with his long awaited coverage of relative font sizes. This is a notoriously tough topic (thanks to a whole bunch of strange CSS bugs and browser differences) but Mark carefully and comprehensively explains the various work arounds and CSS hacks needed to get the right effect with maximum accessibility.