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:

• Main Page showing old-school and new-way.
• Using Margin-left
• Using position:relative; left:
• Using position:absolute; left:
• Using DIVs (jQuery to handle hover)

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