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

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.