CSS Spriting is a technique for speeding up the load times for your website by reducing the number of HTTP requests for images to the server. On Yahoo’s best practices website, they say:
“CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.”
This technique can be extended for non-background images on your site as well. However, some issues arise when you use CSS spriting for your main navigation elements(among other images):
- You can’t attach alternate text to divs for accessibility purposes
- CSS Spriting and the IE6 PNG fix are incompatible
- The images will not print out on printouts unless the client option to print background images is selected (this is bad for logos and menus, etc)
- For images in pages (that are not actually background images), it seems semantically bad to hide the image in CSS.
With these concerns in mind, I devised a cross-browser compliant solution that addresses all of the aforementioned problems. The new technique uses an image tag, a div, and the CSS clip property.
Here’s the code for the technique:
The CSS
.menu-about { width: 106px; height: 29px; position: relative; top: 0; left: -293px; }
.menu-about img { position: absolute; clip: rect(0 399px 29px 293px); }
The HTML
<div class="menu-about">
<img class="transparent_png" src="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png" alt="About" title="About Us" width="611" height="39" /></div>
And here’s the code in action: [ view the full image ]
And here’s an alternate solution using the anchor tag:
This technique can be easily customized in many different ways. However, for repeating backgrounds and css mouseovers, the traditional CSS sprite techniques are better suited.
Update: As Dan pointed out in the comments, this technique can accomplish css mouseovers (I overlooked this possibility since my first draft of this article only used divs, rather than anchor tags). Thanks, Dan!
December 11th, 2008 at 10:55 am
[...] Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the [...]
December 11th, 2008 at 11:09 am
Neat technique, I’ll have to try that out myself.
I think you could probably manage css rollovers with this one. if you expanded your sprite to include rollover states, you could set top:-29px on the image (and overflow:hidden on the nav), and i think that would do it.
Worth a look-see, anyway(:
December 11th, 2008 at 11:17 am
awesome. i haven’t worked much with clip: css attribute, didn’t realize it works cross browser.
” the traditional CSS sprite techniques are better suited.” it cracks me up when I see people use ‘traditional’ regarding technology barely a decade old. still, i say it too.
December 11th, 2008 at 11:47 am
Hi Jennifer,
Just saw the article on Ajaxians. Nice concept. It also support floating!
Now let’s mix that with some alpha png’s :)
December 11th, 2008 at 11:58 am
Oh, good point, Dan. I think you’re right. In my first draft of this concept, I didn’t use anchor tags… but with the anchor tags, it definitely would work. Thanks!
December 11th, 2008 at 12:10 pm
Back in 2000 we used to call that the Canvas-Sprites technique on http://www.Javascript-games.org. This technique has the advantage to allow sprites scaling as I documented in the technical informations of 3D TOMB II [1]. However I recommend not to use the CSS clip property as IE6- have a proprietary syntax for it. Prefer setting the parent in overflow:hidden; and positioning the IMG inside the canvas^Wparent element.
[1] http://www.3dtomb2.com/technical_infos.php#sprites_rendering_and_animation
December 11th, 2008 at 12:18 pm
[...] Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the [...]
December 11th, 2008 at 5:59 pm
Yeah, it could be great…
Is your image a part of your data here?
I don’t think so, it has no sense in your document…
How will you do when you’ll want to add an alternative design? I have blue interface, I wanna add a green one.
I think you should have titled you post: “CSS Spriting with bad practices”.
I also think you can forget IE6 compatibility in (almost) 2009, retards just have to update now, we can’t support it all our life because of dumbs.
Use transparent gif instead of png to make Spriting compatible with IE6 is really better than using a bad web 0.01 practice.
December 11th, 2008 at 6:02 pm
FYI yes the mouseover capability does work in IE6/7 but only when you set ‘background-color:transparent’ to the ‘a:hover img’?
Great technique. Thanks!
December 11th, 2008 at 6:15 pm
Mulasse: It’s true that this isn’t the be all, end all for CSS Spriting, it’s just another tool in the toolbox for creating fast, cross-browser compliant websites. So, if you’re only changing your website template with a stylesheet, then yes, this isn’t the solution for you (although most website template changes are more robust than that).
As for the IE6 issue, you’re right that it’s *hopefully* going away. However, the fact of the matter is that for many e-commerce sites IE6′s numbers are still in the 35+ percentile (so it’s difficult to say when we’ll be able to completely ignore it – although I will celebrate that day with the rest of the web development community).
December 11th, 2008 at 11:05 pm
[...] Extending CSS Spriting use normal img tag for CSS sprites [...]
December 11th, 2008 at 11:12 pm
Cool technique!
Just letting you know that as of v2.0, my IE PNG Fix script does support background-position and repeat, so you can use CSS sprites to your heart’s content :).
I just tested your technique with the PNG fix and it worked fine too out of the box. Hope this helps everyone!
Cheers – Angus Turnbull
December 11th, 2008 at 11:31 pm
[...] Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the [...]
December 12th, 2008 at 12:54 am
In aug, 2007 I had put together something similar with overflow:hidden.
http://commadot.com/the-right-sprite/
Its got a bunch of other techniques on that post too.
I hope its helpful. :)
December 12th, 2008 at 1:57 am
Smart, but WRONG. Mulasse says it all.
December 12th, 2008 at 2:05 am
[...] Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the [...]
December 12th, 2008 at 2:06 am
[...] Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the [...]
December 12th, 2008 at 2:27 am
[...] Article on extending css spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the same effect as background image clipping. Why? [...]
December 12th, 2008 at 4:36 am
I think that if you extend this to multiple images,this would mean that I have to include the img tag everywhere,which means that I would be effectively making multiple calls for the same background image.Please correct me if am wrong.
December 12th, 2008 at 6:05 am
I think that in this way is better:
.menu-img { width: 106px; height: 29px; position: relative; }
.menu-img img.about { position: absolute; clip: rect(0 399px 29px 293px); top: 0; left: -293px; }
so I could use the class “menu-img” for all the sprites with the same size (for icons?) And just create one new rule for each sprite ;-)
December 12th, 2008 at 6:20 am
[...] – Extending CSS Spriting New CSS sprite technique that does away with background images and improve [...]
December 12th, 2008 at 6:38 am
[...] Jennifer Semtner nos da una solución para cuando queremos utilizar imágenes como elementos de menú, una mejora a la técnica CSS Spriting con la que ahorramos tiempo de descarga al utilizar sólo 1 imagen, hacemos menos HTTP requests. [...]
December 12th, 2008 at 7:32 am
Good work, and a clever technique… but my only problem is that, especially for navigation, I prefer to use html text within the link, which is then image-replaced to create something pretty.
This gives google/screen readers a nice html text list and everyone else a graphical menu. Your option would only leave image-alt text to non-image capable browsers, which is not ideal IMHO.
Drew Dillers’ ingenious alternative PNG fix for IE6 (http://www.dillerdesign.com/experiment/DD_belatedPNG/) supports background image position so can be used for sprites too, I recommend checking it out.
December 12th, 2008 at 3:19 pm
Nice.
Thank you.
But I see in the Yahoo developer network:
http://developer.yahoo.com/performance/rules.html#css_expressions
“Avoid CSS Expressions”
December 12th, 2008 at 3:43 pm
Alireza: CSS expressions are something different; CSS properties (like clip or background, etc) are ok to use.
December 12th, 2008 at 4:58 pm
Thanks Jennifer, it’s nice new technique of CSS Sprites!
Recently, we have developed next generation method of CSS Sprites based on data:URI DURIS – Data:URI [CSS] Spites. Full automatic building of CSS Sprites. Will soon appear description on english.
December 12th, 2008 at 11:09 pm
[...] Jennifer Semter 的部落格看到一則 extending css spriting 文章，他不再用 background-image 與 background-position 的技巧，改用標準的 DIV/A [...]
December 13th, 2008 at 2:24 am
[...] Jennifer Semtner.com :: Web Designer / Developer » Blog Archive » Extending CSS Spriting [...]
December 14th, 2008 at 3:29 am
I saw how has been created css for top menu, and I think all background-position at a:hover should be changed by Y direction. Then you can set for items only width parameter and css for hover effect will be look like #menu a:hover{backround-position: 0 -30px;}
Sorry for my terrible english :)
December 16th, 2008 at 1:29 am
[...] Extending CSS Spriting [...]
December 16th, 2008 at 1:51 am
Mark Perkins: the problem with hiding html text and replacing it with background images is that Google can remove your site from the search results – see http://www.google.com/support/webmasters/bin/answer.py?answer=66353
December 16th, 2008 at 3:58 pm
I may be missing something, but this looks like it will be a complete mess if CSS is disabled – you’d just end up with the same image repeated.
December 19th, 2008 at 1:56 am
As noted in a number of comments above this technique degrades horribly with CSS turned off.
Equally the value for your image is going to be hardcoded all over the place in your HTML so changing the image could lead to unsightly results.
Would therefore use this technique with caution.
December 20th, 2008 at 4:26 am
I saw the creative writing. It is really informative. Thanks for sharing.
Regards,
SBL Graphics
http://www.saibposervices.com/Clipping-path_services.aspx
December 20th, 2008 at 7:24 pm
[...] Extending CSS Spriting [...]
December 21st, 2008 at 4:01 am
[...] Jennifer Semtner.com :: Web Designer / Developer » Blog Archive » Extending CSS Spriting CSS Spriting is a technique for speeding up the load times for your website by reducing the number of HTTP requests for images to the server. (tags: webdesign css html) [...]
December 23rd, 2008 at 6:58 am
sourcearticle.info has a similiar post if anyone’s interested
December 24th, 2008 at 6:19 am
but for the fact that position. So hang on to!
December 26th, 2008 at 10:39 am
I found more here if anyone’s interested
December 31st, 2008 at 2:47 am
MCDfSe Thanks for good post
January 2nd, 2009 at 6:54 am
hi…
Thank you! I would now go on this blog every day!…
January 3rd, 2009 at 4:22 am
greatings…
disagree…
January 3rd, 2009 at 2:15 pm
greatings…
Not sure that this is true) but thanks…
January 8th, 2009 at 10:15 pm
Great work I think you should have titled you post: “CSS Spriting with bad practices”.
I also think you can forget IE6 compatibility in (almost) 2009, retards just have to update now, we can’t support it all our life because of dumbs,
http://www.cyberdesignz.com/ , you can get more about CSS from this,
January 9th, 2009 at 2:35 am
Very informative and useful article. Thanks for sharing this buddy.
January 9th, 2009 at 8:12 am
[...] Jenny has also devised a technique for foreground image CSS sprinting which in essence bears all the merits of the original CSS Sprites method. [...]
January 9th, 2009 at 8:22 am
Well, I don’t know if you have tried it or not or if there’s something I’m doing wrong, but the hovering effect seems unachievable in IE and Opera.
See the code and live demo here: http://www.kavoir.com/examples/jenny-css-sprites/menu.html
In FF, Chrome and Safari, it’s all fine, but the hovering doesn’t work in IE and Opera.
Any idea?
January 19th, 2009 at 11:10 am
Yang Yang – I went ahead and posted a solution to this problem ( http://www.jennifersemtner.com/wp-content/uploads/2009/1/menu.html ) and also posted the solution to stackoverflow ( http://stackoverflow.com/questions/434703/extended-css-sprites-not-working-with-hover#444051 ). The problem is that apparently IE (can’t vouch for Opera) won’t apply :hover effects to child elements (like img). In order to use your exact markup, I used the overflow property, rather than the clip property (however, both of those properties will have the same benefits and drawbacks).
March 25th, 2009 at 12:15 pm
Perfect work!Keep posting
==
http://loving-life.web-elite.com/site.map.php
April 27th, 2009 at 9:22 pm
[...] Extending CSS Spriting Jennifer Semtner extends the classic CSS sprites technique to non-background images and discusses what to consider when using CSS Sprites for the design. [...]
May 24th, 2009 at 7:21 am
Hi, outgoing posts there :-) thank’s exchange for the gripping advice
June 3rd, 2009 at 2:52 am
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
June 23rd, 2009 at 8:32 am
[...] Article on extending css spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the same effect as background image clipping. Why? [...]
July 9th, 2009 at 5:49 am
[...] Extending CSS Spriting Jennifer Semtner extends the classic CSS sprites technique to non-background images and discusses what to consider when using CSS Sprites for the design. [...]
September 6th, 2009 at 2:38 am
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
December 25th, 2009 at 10:07 am
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
May 26th, 2010 at 6:59 am
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
August 8th, 2010 at 6:26 am
[...] Jennifer Semtner [ Web Designer / Developer ] » Blog Archive » Extending CSS Spriting [...]
September 23rd, 2010 at 8:43 pm
[...] Extending CSS Spriting [...]
December 7th, 2010 at 8:35 pm
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
January 6th, 2011 at 8:53 am
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
January 19th, 2011 at 11:05 pm
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
February 15th, 2011 at 1:50 am
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
February 20th, 2011 at 4:09 am
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
June 5th, 2011 at 9:15 am
[...] Extending CSS Spriting [...]
September 5th, 2011 at 9:47 pm
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
November 14th, 2011 at 6:04 pm
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
January 16th, 2012 at 9:14 pm
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
August 6th, 2012 at 7:08 pm
[...] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
September 23rd, 2012 at 11:24 am
[...] Extending CSS SpritingJennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。 [...]
March 5th, 2013 at 8:41 am
[...] Extending CSS Spriting Jennifer Semtner extends the classic CSS sprites technique to non-background images and discusses what to consider when using CSS Sprites for the design. [...]