The right sprite?
11 Aug 2007There 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.
- Tags: Technology
Comment Form
About commadot.com
Started in 1996, Glen Lipka has been been randomly publishing about User Experience, Technology, Human Psychology and other subjects.
15 Comments
Ajax Girl » Blog Archive » CSS Keys, and the search for the right Sprite
August 13th, 2007 at 2:42 pm
[...] big matrix image that CSS uses to chop up to display pieces” technique, and wrote about the right sprite where he delves into various cleaner workarounds for the fact that Firefox doesn’t support [...]
Ajax Performance » Happy Sprite Day!
August 13th, 2007 at 2:49 pm
[...] 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 [...]
Links for 8/13/07 [my NetNewsWire tabs]
August 14th, 2007 at 2:26 am
[...] 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! [...]
CSS Keys, and the search for the right Sprite « outaTiME
August 14th, 2007 at 2:47 am
[...] big matrix image that CSS uses to chop up to display pieces” technique, and wrote about the right sprite where he delves into various cleaner workarounds for the fact that Firefox doesn’t support [...]
erkko
August 17th, 2007 at 8:57 am
you can use css1 background-position. what really sucks, is people who try to use ie-only code.
Best of August 2007 | Best of the Month
September 18th, 2007 at 5:18 am
[...] 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. [...]
Nachlese August 2007 - Die Seiten des Monats | Nachlese
September 18th, 2007 at 5:19 am
[...] 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. [...]
Best of August 2007 .
September 18th, 2007 at 6:52 am
[...] 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. [...]
Russell Heimlich
September 18th, 2007 at 8:11 am
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.
Glen Lipka
September 18th, 2007 at 8:15 am
Sorry, I accidentally moved the folder when I was cleaning up my examples directory. Should be ok now.
lost node » Blog Archive » Best of August 2007
September 18th, 2007 at 9:22 am
[...] 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. [...]
pascal
September 22nd, 2007 at 3:47 am
don’t work with Opera
Glen Lipka
September 22nd, 2007 at 7:26 am
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
stoph
September 22nd, 2007 at 1:44 pm
This doesn’t work in Safari (2).
Glen Lipka
September 22nd, 2007 at 9:06 pm
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?