Just in case you stumbled here with no idea what they are, here is a good tutorial that explains what CSS sprites are.
If you want to use CSS sprites for decoration purposes, then go for it!
As long as you provide enough empty space between the elements in your sprite image, just in case I’d zoom fonts but not the entire display, I bear you no grudge! (please note, though, that some people zoom fonts rather than the whole page — I do; some people don’t have the choice as their browser is *ahem* very old).
Let’s assume the network doesn’t like me, the nasty beast.
Or let’s assume that a security proxy locks me out of the net but you still have the page in your cache (it happened to me this morning, by the way).
Then what happens to the sprites that were supposed to convey relevant information, like a rating? Well, I just can’t see it.
This is a variant of the previous one: I’m loading the page, and the network has decided that OK, it likes me, but I deserve to wait a bit. After all, not all of us live on broadband connections.
The page seems to be displaying properly, but no, I still can’t see the rating (and “wait for it” doesn’t really mean the same, does it?).
So, let’s say my eyes work sub-par. I’m talking big numbers, mind you, not so-called minorities. In the US alone, 7.8 million people report having difficulties reading.
Some people try to accomodate accessibility by adding a title attribute to the component that has a background image, so as to compensate and try to convey some information. This doesn’t work, either.
Here is an audio file so that you hear the rating with my screen reader. (by the way, “veed” is French for “empty”).
Sometimes when you are too sensitive to light, or when pages are not contrasted enough, you resort to forcing foreground and background colours via your browser. What most people don’t know is that background colours and background images share a common ground: they are background. When I force a background colour, the background image disappears as well.
See a contrasted white on black rendering.
I hope by now the point is made: an image is an image is an image, and CSS sprites, like CSS replacement, cannot be used to provide content, period. Thanks for listening. Have a second round, it's on the house!
(By the way, if you're looking for working code, have a look at this nice star-rating implementation, written with jQuery.)
Give credit where credit’s due: images and ornaments by Maurice Svay
