CSS Sprite techniques, css background or img's

Question

There are two image sprite techniques. The "classic" version uses the background and the background-position css properties. (as it's described here http://www.alistapart.com/articles/sprites)

The "second" version uses an image tag and its clip css property. ( http://css-tricks.com/css-sprites-with-inline-images/)

My question is that are there advantages of using the "second" version over the "classic" version?

thanks and best, Viktor

Answer 1

Remember to specify dimensions in the img tag too when using the second method (clip) so that the whole sprite won't be displayed even when CSS is disabled. One advantage of that method is that with clip the images are displayed even when high contrast themes are enabled in Windows, which is not the case with background images.

Check this two articles for more information:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

use sprite via pseudo(:after) elements with 'content' and 'clip' property

I wouldn't recommend this method. It may not be a problem if you just want to display a small number images, but it's extremely slow if you apply it to hundreds of elements (CSS pseudo elements are bad for performance in general), especially on slower machines (smartphones, etc.) or older browsers like IE8.

Answer 2

The difference comes mainly down to the semantics of the document: You should still only use backgrounds for decorative and layout graphics, and only use image tags for graphics that are part of the content of your page.

Remember that pages should still be useful and usable without any CSS: with the second technique, this would mean that your whole sprite-map would be visible (you wouldn't get any clipping) everywhere you used a sprite - very confusing!

The first technique wouldn't show any sprites, but wouldn't be wrong or confusing either.

Whether a graphic is content or decoration gets a bit tricky when you consider things like icons - where sprite techniques are really useful. Personally, I prefer to use background images for icons, as they are adding information to another element (say a link or button control), not elements in their own right.

In short - the image tag based sprites is a bit of a broken technique - I wouldn't use it.

Answer 3

There is a use case when you want to print a page with icons on it (for example an organization contacts card with phone/skype/etc). So you have two options:

 - use separate img elements
 - use sprite via pseudo(:after) elements with 'content' and 'clip' property