Techniques de sprite CSS, arrière-plan css ou clip d'img

Question

Il existe deux techniques d'image-objet d'image. La version "classique" utilise les propriétés css de l'arrière-plan et de l'arrière-plan. (comme décrit ici http://www.alistapart.com/articles/sprites)

La "seconde" version utilise une balise d'image et sa propriété clip css. (http://css-tricks.com/css-sprites-with-inline-images/)

Ma question est de savoir s'il y a des avantages à utiliser la version "seconde" par rapport à la version "classique"?

remerciements et, Viktor

Answer 1

La différence vient principalement vers le bas à la sémantique du document: Vous devez encore que les milieux d'utilisation pour les graphiques de décoration et de mise en page, et utiliser uniquement les balises d'image pour les graphiques qui font partie de la contenu de votre page. Rappelez-vous que les pages devraient toujours être utiles et utilisables sans CSS: avec la seconde technique, cela signifierait que votre sprite-map entière serait visible (vous n'obtiendriez aucun écrêtage) partout où vous utilisiez un sprite - très déroutant!

La première technique ne montrerait aucun sprite, mais ne serait pas erronée ou confuse non plus.

Si un graphique est contenu ou décoration devient un peu difficile lorsque vous considérez des choses comme des icônes - où les techniques sprite sont vraiment utiles. Personnellement, je préfère utiliser des images d'arrière-plan pour les icônes, car elles ajoutent des informations à un autre élément (disons un lien ou un contrôle de bouton), et non des éléments à part entière. En bref - les sprites basés sur des balises d'image sont un peu cassés - je ne les utiliserais pas.

Answer 2

Il existe un cas d'utilisation lorsque vous souhaitez imprimer une page avec des icônes (par exemple une carte de contacts d'organisation avec phone/skype/etc). Donc, vous avez deux options:

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

Answer 3

Pensez à spécifier les dimensions dans la balise img trop lorsque vous utilisez la deuxième méthode (clip) de telle sorte que l'image-objet tout ne sera pas affichée même lorsque CSS est désactivé. Un avantage de cette méthode est que les images sont affichées avec clip même lorsque les thèmes à contraste élevé sont activés dans Windows, ce qui n'est pas le cas avec les images d'arrière-plan.

Vérifiez ces deux articles pour plus d'informations:

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

sprite utilisation via pseudo (: après) éléments avec la propriété 'contenu' et 'clip'

Je ne recommanderais pas cette metho ré. Ce n'est pas un problème si vous voulez juste afficher un petit nombre d'images, mais c'est extrêmement lent si vous l'appliquez à des centaines d'éléments (les pseudo-éléments CSS sont mauvais pour la performance en général), surtout sur les machines plus lentes (smartphones, etc.) ou des navigateurs plus anciens comme IE8.