In this free article Dave Shea shows how to use an innovative new CSS technique which he calls CSS Sprites that works in all modern browsers (except Opera 6), and replaces old-school image slicing and dicing (and the necessary JavaScript) with standard CSS and HTML lists.
This article was originally published by A List Apart and is reproduced by kind permission. It's copyright © 1998–2004 A List Apart Magazine, Happy Cog Studios, and Dave Shea.
A couple of final thoughts. Our new CSS Sprite method tests well in most modern browsers. The notable exception is Opera 6, which doesn't apply a background image on link hover states. Why, we're not sure, but it means that our hovers don't work. The links still do, and if they've been labeled properly, the net result will be a static, but usable image map in Opera 6. We're willing to live with that, especially now that Opera 7 has been around for a while.
The other concern is familiar to anyone who has spent time with FIR. In the rare cases in which users have turned off images in their browsers but retained CSS, a big empty hole will appear in the page where we expect our images to be placed. The links are still there and clickable, but nothing visually appears. At press time, there was no known way around this.
Then there's file size. The natural tendency is to assume that a full double-sized image must be heavier than a similar set of sliced images, since the overall image area will usually be larger. All image formats have a certain amount of overhead though (which is why a 1px by 1px white GIF saves to around 50 bytes), and the more slices you have, the more quickly that overhead adds up. Plus, one master image requires only a single color table when using a GIF, but each slice would need its own. Preliminary tests suggest that all this indicates smaller total file sizes for CSS Sprites, or at the very least not appreciably larger sizes.
And lastly, let's not forget that our markup is nice and clean, with all the advantages that go along with that. HTML lists degrade wonderfully, and a proper image replacement technique will leave the text links accessible to screenreaders. Replacing the sprite imagery is dead simple, since all of our dimensions and offsets are controlled in a single CSS file, and all of our imagery sits in a single image.
Creator of the popular css Zen Garden, Dave Shea is a graphic
designer who thinks this CSS thing may just be going places. Dave writes daily
for mezzoblue, and just started consulting
for his own Bright Creative.
He was interviewed by DMXzone recently
and has contributed to a book on CSS, Cascading Style Sheets:
Separating Content from Presentation, Second Edition
I'm the brand manager of glasshaus, a publishing company specialising in books for web professionals. We've a series for dreamweaver professionals - the dreamweaver pro series.
You must me logged in to write a review.
