A List Apart

The A List Apart Blog Presents:

Ten Years Ago in A List Apart: CSS Sprites – Image Slicing’s Kiss of Death

Article Continues Below

My fellow old-time web designers may remember the joys of image swapping via JavaScript. Here’s how we did it back in 1998 (don’t hate me because I’m beautiful):

Even when some of us figured out, the following year, that HTML was supposed to be for structured content, CSS for visual layout, and JavaScript for behavior—and even when browsers began supporting that separation of powers a couple of years later—for years, the web continued to be a hodgepodge of sliced and diced images and excessive http calls, all held together via inline JavaScript that turned HTML into a chocolate-and-peanut-butter soup. Sure, we all wanted our separation of presentation from structure—but we loved our glitzy visual effects more.

And then in 2004, a wonderful man named Dave Shea—the same prophet who had launched the CSS Zen Garden just eight months earlier—helped our entire industry kiss all that goodbye with a single, deceptively simple A List Apart article.

Rereading CSS Sprites: Image Slicing’s Kiss of Death from the comfort of today’s privileged position, it’s easy to miss how new and revolutionary Dave’s thinking was.

Today we take sophisticated CSS for granted, and we expect our markup to be just that—clean and semantic, not oozing behavior and leaking layout. But in 2004, removing all that cruft from HTML took courage. And it was an act of absolute wizardry to conceive that a grid of images in a single master GIF or JPEG could replace all those http calls and subfolders full of tiny images thanks to CSS’s hover property and cropping ability. Admittedly, Dave couldn’t have done what he did without Petr Stanicek’s (Pixy) Fast Rollovers Without Preload, an ingenious predecessor to CSS Sprites which Dave readily acknowledged in his groundbreaking ALA article.

If you want to know how big an impact CSS Sprites: Image Slicing’s Kiss of Death had on our industry, consider that, ten years later, CSS Sprites are still web design’s standard best practice for adding non-textual interactive cues to a web page.

As we celebrate 25 years of the web, let’s also admire the accomplishments of the last ten years by the brilliant members of our web design community. Congratulations and thank you, Dave Shea—and congratulations to us all.


5 Reader Comments

Load Comments