UPDATE: This article was written in 2012 regarding coding of CSS in a production environment and is likely no longer relevant. #relic
Sprites
To get right to the point, when working with sprites, you can set up your sprites in a nice grid and bump the sprite up or down, depending on the context you’re using the images for, but if you expect it to work nice and lean, forget about it.
Photo by Maik Jonietz on Unsplash
Photo by Maik Jonietz on Unsplash
Maik JonietzAs I have my system setup, I bump the position of the sprite background up or down depending on which icon i’d like to display, whether the article title is a story, link, chat, discussion, email address, etc.
I also have the sprite move left and right depending on it’s context on the page. If it’s an article in the sidebar, it uses a smaller icon, or perhaps if it’s hovered, then i move the sprite move over to show the red or green or grey or even white versions of the icon.
The beauty of the system, is that in most browsers, you can define the Y Position of the background image (the sprite), or the X Position for each case like so:
background-position-x: -204px;
The problem here is that Firefox doesn’t support specifying only one of the axis in this way (thanks @Murtaugh). Apparently they didn’t want to change the spec to allow this sort of thing, and the decision was made to wait until CSS4 (or so it seems, thanks @Murtaugh).
The short of it is that you’ll have to define both positions in every rule, at least if you’re aiming at supporting Firefox… for now.