Luke DornyAs 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.
Referenced
- is that Firefox doesn't support specifying only one of the axis in this way http://commadot.com/background-position-y-firefox-fails/
- @Murtaugh http://twitter.com/murtaugh/status/217732899087204352
- or so it seems http://lists.w3.org/Archives/Public/www-style/2012Feb/0630.html
- @Murtaugh http://twitter.com/murtaugh/status/217733509534580736
Search flickr for
Commentary
- There is one comment . Comments are closed. Move along.
-
Ted Goas
http://ww.tedgoas.com
1
FIRST POST!
Huh, I didn’t even know that restriction existed. I use sprites all the time and as long as I keep all of the states close together in the CSS, defining both axis every time isn’t much of a problem.
Well now I know to think twice if I decide to get cute. Thanks!
-
Add Yours:
Commenting is not available in this channel entry.