Free! CSS Sprites: Image Slicing's Kiss of Death
|Technologies:||CSS, XHTML, HTML|
|Number Of Pages:||8|
Benefits and pitfalls
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.
About The Author
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