Web, Applications agiles et Ruby on Rails

IE8, opacité et PNG… la couleur d’un Bug

Devant la grande diversité de la gestion de la transparence entre les différents navigateurs et leurs versions respectives, j’ai depuis un moment (depuis l’arrivé d’IE8, en fait) pris l’habitude d’utiliser des PNG 24 Bits afin de créer des effets de transparence. Rien de plus simple, vous créez un PNG de, disons, 2x2 pixels, semi-transparent, puis vous l’appliquez en background repeat. Pour IE6, il suffit de gérer ça à l’ancienne avec “filter : alpha(opacity=80);”. Et hop, en deux lignes, vous avez un effet de transparence Cross Browser qui marche à tous les coups.

Le truc que je viens de découvrir, c’est qu’avec IE7/8, lorsque vous prenez une image de -exactement- 1x1 pixels, vous vous retrouvez avec… un dégradé !!! Etonnant, non ? Cher lecteur, je vais te faire gagner du temps et t’épargner un arrachage de cheveux (non, ne cherche pas de conflit avec JQuery. Non, c’est pas non plus un attribut en surcharge dans ta CSS…) : il suffit uniquement d’utiliser des images de -au moins- 2x2 pixels, et tout fonctionnera normalement.

Envie de surprise ? Envie de perdre du temps ? Internet Explorer !