Même si le billet est ancien, je me permet de le ressortir pour donner mon retour d’expérience sur l’utilisation des sprites.

Il existe, à mon sens, une grosse réticence pour utiliser les sprites qui, vous vous en douterez, vient de la prise en charge des images de fond des CSS par IE6.

En effet, même si ie6 est sur la fin, il faut savoir qu’il existe encore des IE6 avec le cache désactivé. J’ai constaté qu’une telle situation fait que pour une image de fond identique avec la même url déclarée à deux endroits différents dans la feuille de style CSS, celle-ci était téléchargée deux fois.

Alors, ce que je me demande, c’est si il existe d’autre navigateurs qui gèrent cela comme ça (je pense aux navigateurs mobiles), et, dans le cas de l’utilisation de gros fichiers pour les sprites, si cela ne pouvait pas faire planter ou du moins ralentir très fortement la navigation des utilisateurs.

Voilà, je sais pas si vous avez déjà rencontré ce comportement et si vous avez des précisions sur la config exacte qui produit cela car avec IETester, je n’ai pas d’option de désactivation de cache.

Nous somme donc d’accord, les sprite en PNG24 avec alpha sous IE6 sont fortement à éviter. (A ma connaissance tous les navigateurs plus recent s’en porte très bien et sans ce hack bien sur).

Je suis curieux que connaitre tes autres alternatives pour utiliser la transparence sur ce fameux navigateur.

C’est à voir, mais quasiment tout le temps, un PNG8 peut suffire, et là pas besoin de hack. Au pire il y a des astuces pour éviter d’avoir à utiliser la transparence, même si ça demande un peu plus de boulot.

Cependant l’un des points qui me pose souvent problème et me semble important de rappeler aussi avec les sprites reste les PNG 24bit avec support de l’alpha, les hacks (à ma connaissance) pour supporter ce format sous IE 6 ne permette pas d’utiliser les sprites étant forcé d’utiliser la sizingMethod « scale » comme dans l’exemple ci dessous:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’path/to/image.png’, sizingMethod=’scale’);