My first article for A List Apart was published this morning. “CSS Sprites: Image Slicing’s Kiss of Death” is an investigation of a new technique that has been formulating for the last six months or so.
The CSS Sprite method enables rollovers, buttons, and dynamic image maps on a simple HTML unordered list. By dropping all
:hover state images into a single image file, IE flicker can be avoided and download times should be quicker. Not to mention the time saved by not exporting a few dozen sliced images. Have a look, and feel free to discuss the article in the ALA forum.
Interestingly, it seems like my better ideas have about a six month incubation period. The Zen Garden began in late October, 2002, and launched in May of 2003. I extended Pixy’s preload method for a set of style-switching buttons on mozilla.org in September last year (which were cut, obviously), but didn’t quite put all the pieces together until just the past few weeks.
Two quick technical notes. First, before someone calls it out, the example image uses graphics from Super Mario Brothers. The original Nintendo Entertainment System used a completely different sprite mapping technique than the basic summary in the article, which saw all graphics broken down into 8 pixel by 8 pixel chunks. So the analogy doesn’t stand up to close scrutiny, but ALA isn’t exactly the place to discuss obsolete tile mapping systems…
Second, though it’s obvious to most, I didn’t make it that clear in the article that the advantage to this approach is that the containing block can be placed anywhere in your document flow that you’d place an inline item. Yesterday’s post on positioning explains this a bit better.