CSS Sprite techniques, css background or img's clip

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

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.