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.
A feel-good lookback
Hi Jeff
Yes I remember all that – took ages to get the menu items put together with rollover effects and the like – but we did it.
These days I’m all wordPress and I don’t even think about menus and menu states.
Thanks for sharing the memory.
BTW I remember CSS Zen Garden but I’m not sure that I would have remembered the name Dave Shea.
No school like the old school :). Things move fast and I dare say that even CSS Sprites are being phased out. I used them mostly for icons back in the day and now those are being replaced with icon fonts. There are still plenty of cases where CSS Sprites is the best option, but it just shows you how fast things change.
I probably missed that article way back in 2004, not even being aware alistapart existed until a year or two after, however, one of my first websites still lives and breathes, in all it’s gory table based nastiness:
http://www.quakewiki.net/archives/qpp/index.html
It would be another 4 years until I started to grok CSS and another 3 more until I saw the light.
Thank you web gurus for showing us the error of our ways!
“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”
You’re such an optimist. Have you looked at the markup of websites build on grid systems, ui component frameworks, bootstraps, the so-called new OOCSS trend, and the like? You’re lucky to see 20% semantic markup there.
I’d say clean and semantic markup still is far from a reality, although I fully agree that we’re in a far better place now.