CSS image switcher (done the right way)

Chris Coyier has done it again. Compelled me to stay up all night, that is (it's 7am as I type this). In Chris's latest screencast, CSS Image Switcher, he demonstrates how to create an "image switcher" using CSS. The problem, though, is that his process is wrong.

Incorrect process

1. What effect or experience do I want to create?
2. How can I achieve this using CSS (and JavaScript if necessary)?
3. What can my markup do to help me?

Correct process

1. What effect or experience do I want to create?
2. What is the most correct and meaningful way to describe the content?
3. How can I achieve the desired effect or experience (or something close to it) without altering my markup?

Chris simply isn't in the right mindset. He's thinking about how he's going to present the content on the page, but he's forgetting to consider the content itself. This is a crucial error. If one views Chris's CSS image switcher demo with styles disabled, one sees something most unhelpful:

CSS image switcher demo as seen at CSS-Tricks (with styles disabled; note the lack of images)

Well, at least one could click on these links to view the images, right? Wrong! The hrefs contain nothing but the hash sign. Chris does mention in the screencast that these links could go somewhere, but it's as if to say hey, here're some links if you need 'em rather than yikes! this page'll be worthless when styles are disabled, you'd sure as hell better link to the images as backup.

I assume that Chris opted to use anchor elements to allow him to employ the :hover pseudo-class and have it work in IE6. It's well and truly time, however, to stop bending over backwards to accommodate IE6's shortcomings, and Google agrees: YouTube to drop support for IE6.

Why meaningful markup matters

Meaningful HTML is not just important to markup geeks who like to use the word "semantic". It's vitally important to search engines. While in most cases discussion of the relationship between structured content and search engines centres on whether Google favours sites with clean, descriptive markup, in the case of Chris's CSS image switcher it's a matter of whether the content is indexable at all! Consider the consequences of a site such as Flickr adopting this approach: any new photo uploaded to the site would be invisible to web crawlers.

One should not rely on either CSS or JavaScript to deliver content – HTML exists to contain and describe content. This is a pragmatic consideration as well as an idealogical one: HTML is the one component of the HTML+CSS+JavaScript stack to which all users have access (certain devices, for example, eschew CSS support in favour of faster page loads).

Meaningful markup for image–caption pairs

As I state in Captions over images, my response to an earlier CSS-Tricks screencast, the definition list is the most appropriate tool in our toolbox.

The screenshot above is marked up within a dt and this caption is a dd (how meta!)

Each term in a definition list should have at least one definition. This enables more than one description — a title and a caption, for instance — to be tied to an image:

<dl>
    <dt><img src="images/ds81.jpg" alt="Vancouver architecture" /></dt>
    <dd>This is not like that</dd>
    <dd>Contrasting ideas engage the mind. Make a photo today that tells
    a story with contrasting elements. — <i>Daily Shoot 81</i></dd>
    ...
</dl>

Beautiful, isn't it? No pointless (literally) anchors, no meaningless ids, no class names, just content wrapped in descriptive HyperText Markup Language. This ensures that the page's content is accessible to all: those viewing the page on mobile phones; those using screen readers or feed readers; and, of course, web crawlers.

The page's content is accessible even with styles disabled

Demo

Check out the CSS image switcher demo to see what's possible with straightforward, structured markup (and some rather less straightforward CSS). The demo works in the latest versions of Firefox, Internet Explorer, Opera, and Camino. Unfortunately the core feature does not work in Safari or Google Chrome, as these WebKit-based browsers fail to handle the dt+dd:hover~dt selector.

Possibly related posts

• Captions over images
• Changing the colour of list bullets using CSS
• Ridding markup of textual decoration
• Prototype image slider
• Higher-level style sheets

Comments

Respond