Les images PNG transparentes dans les feuilles de style sur Drupal pour Internet Explorer 6

Tous les développeurs web le savent, IE6 est un boulet. Un logiciel qui nous a fait perdre à tous plusieurs années sur les technologies web. Même s'il faut reconnaître qu'en son temps, IE6 était en avance sur tout le monde, désormais tout le monde attends qu'il disparaisse définitivement de la planète. Un problème récurrent sous IE6 est l'affichage des PNG transparents. La solution est connue, il s'agit du filtre DXImageTransform, mais voyons comment l'utiliser dans Drupal. Lorsqu'on utilise une image dans un fichier CSS, le chemin de l'image est relatif au chemin de la feuille de style. Avec le filtre d'IE6, le chemin de l'image est relatif à la page ! Sur une instance de Drupal, si, dans la feuille de style, on a : .maclasse {  background:transparent url(images/image.png) top left no-repeat; } Dans la feuille de style dédiée à IE6, on aura : .maclasse {  background-image:none;  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sites/[chemin du site]/themes/[nom du thème]/images/image.png', sizingMethod='crop'); } Où [chemin du site] correspond au dossier dans lequel se situe le site, ou "all" ou "default" si vous n'utilisez pas le multisite, et [nom du thème] au nom du dossier de votre thème. Le paramètre "sizingMethod" peut prendre comme valeurs "crop" ou "scale". "crop" n'affichera l'image qu'une fois, tandis que "scale" l'étirera pour remplir l'élément dans lequel elle se trouve. Il n'est pas possible de répéter une image de fond avec ce filtre, il faut donc ruser. On peut utiliser une image de 1 pixel de large (ou de haut) et l'étirer, cela revient au même qu'un pixel répété ! Mais pour les autres cas, il faudra prévoir une image plus grande et utiliser "crop"... Il faut savoir aussi que l'élément doit avoir l'attribut "hasLayout", c'est à dire des dimensions (et donc être un block). Vous pouvez donc donner une hauteur et/ou une largeur à l'élement, ou encore utiliser la propriété css Microsoft "zoom" : zoom:1; Décidément, avec IE6, rien n'est simple !