The right sprite?

By | August 11, 2007

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.

15 thoughts on “The right sprite?

  1. Pingback: Ajax Girl » Blog Archive » CSS Keys, and the search for the right Sprite

  2. Pingback: Ajax Performance » Happy Sprite Day!

  3. Pingback: Links for 8/13/07 [my NetNewsWire tabs]

  4. Pingback: CSS Keys, and the search for the right Sprite « outaTiME

  5. erkko

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

    Reply
  6. Pingback: Best of August 2007 | Best of the Month

  7. Pingback: Nachlese August 2007 - Die Seiten des Monats | Nachlese

  8. Pingback: Best of August 2007 .

  9. Pingback: lost node » Blog Archive » Best of August 2007

  10. Glen Lipka

    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

    Reply
  11. Glen Lipka

    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?

    Reply

Leave a Reply