Skip to content

The right sprite?

There are many ways of using a image sprite. Most ways use a background-image that can be moved using CSS. The problem is that this method creates alot of CSS defintitions that are hard to manage. The reason is that Firefox does not support the background-position-x CSS attribute. This really sucks because it means that you can’t have a sprite ‘matrix’ that has each icon with different states in different columns. See my example.

I decided to try out some other methods. I had come up with this idea independently, but to give credit, this guy had a similar idea first. He called it a foreground-sprite. Basically, it meant bypassing the background-image CSS and using margin-left or positioning to achieve the same results. The benefit is huge for manageability. However, there are lots of options. Do you still use CSS to define the positions? Maybe jQuery could help manage.

For people who can’t handle the “What if they turn off JS question” then the technique works fine just in CSS. It should cut your icon CSS in half by allowing one line to define the hover or state change. For applications that require JS, then you could go a step further and manage the list of icons completely independently of CSS. It seems that defining the order of a bunch of icons is not very interesting in terms of style. It’s really just an array.

I made a bunch of sample pages. Let me know which you think is the best method or an improvement to one of mine or a brand new method? Which is the right sprite?

Examples:

I would like to do some profiling and see if there is a speed difference on any.

Published inUncategorized

15 Comments

  1. […] is from Glen Lipka, another of the great people I had the pleasure to meet at TAE last month, who hopes to improve the manageability and reliability of CSS sprites. After wrestling with the verbose CSS syntax necessary to make this approach work in current […]

  2. […] commadot.com » Blog Archive » The right sprite? —More thoughts on using image sprites. The method has a few downfalls that can be overcome with what Glen Lipka calls a “foreground-sprite.” Pretty good read! […]

  3. erkko erkko

    you can use css1 background-position. what really sucks, is people who try to use ie-only code.

  4. […] CSS: The right sprite There are many ways of using a image sprite. Most ways use a background-image-property that can be moved using CSS. The problem is that this method results in many CSS definitions that are hard to manage. Other approach: bypassing the background-image in CSS and using margin-left or positioning to achieve the same results. The benefit is huge for manageability. Foreground Sprites: the same idea, more detailed explanation. […]

  5. […] CSS: The right sprite Eine neue Anwendung von CSS Sprites-Technik: um die Anzahl der Angaben in CSS zu minimieren, wird anstelle des background-image-Attributs das margin-Attribut ausgenutzt. Foreground Sprites: gleicher Ansatz, detaillierter erklärt. […]

  6. […] CSS: The right sprite There are many ways of using a image sprite. Most ways use a background-image-property that can be moved using CSS. The problem is that this method results in many CSS definitions that are hard to manage. Other approach: bypassing the background-image in CSS and using margin-left or positioning to achieve the same results. The benefit is huge for manageability. Foreground Sprites: the same idea, more detailed explanation. […]

  7. I found your post via Smashing Magazine. None of your example pages work? I’d like to take a look at what you are saying.

  8. Sorry, I accidentally moved the folder when I was cleaning up my examples directory. Should be ok now.

  9. […] CSS: The right sprite There are many ways of using a image sprite. Most ways use a background-image-property that can be moved using CSS. The problem is that this method results in many CSS definitions that are hard to manage. Other approach: bypassing the background-image in CSS and using margin-left or positioning to achieve the same results. The benefit is huge for manageability. Foreground Sprites: the same idea, more detailed explanation. […]

  10. pascal pascal

    don’t work with Opera

  11. Opera, hmm. I guess I should have tested with Opera. I typically avoid it since it makes up such a tiny percentage of viewers. Foreground sprites will definitely work in Opera, but the css might be slightly different. Just like you sometimes have to include a ie6.css

  12. This doesn’t work in Safari (2).

  13. I fixed the problem in Opera. Not related to the sprites themselves. Apparently Opera has issues with indexOf. I wrote up the fix here. http://commadot.com/?p=616

    I am not sure how to troubleshoot this in Safari 2. I don’t have a mac. 🙁 Steph can you check now? Maybe it’s the same issue?

Leave a Reply

%d bloggers like this: