IE6 et PNG, je t'aime moi non plus

Pab. — Mon, 07 Aug 2006 09:54:00 +0200

Malgré le bug d'IE6 empêchant l'affichage des PNG transparents (32 bits) il existe quelques solutions de contournement. Je vais essayer de rassembler dans ce billet les différents techniques utilisées, en insistant sur leur fiabilité dans la pratique, si vous décidez de les utiliser dans le cadre d'un projet professionnel.

Cas d'un PNG dans une CSS (en image de fond)

Cette technique fonctionne à 2 conditions :

le bloc recevant l'image de fond doit être positionné en absolute ou avoir ses propriétés width ou height fixées
l'image ne peut être ni répétée ni positionnée

Voici un bloc auquel nous allons appliquer un png en image de fond :

<div id="test">	
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>		
</div>

Voici ensuite le code CSS :

#test{
	width:400px;
	background: url("fond.png") no-repeat  0 0;
}

Pour IE, grâce aux commentaires conditionnels, nous allons ensuite annuler l'image de fond et appliquer la propriété filter à la place :

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#test{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fond.png', sizingMethod='crop');
}
</style>		
<![endif]-->

la propriété sizingMethod peut recevoir comme valeur 'image', 'scale' ou 'crop'. La valeur 'scale' ajuste les dimensions de l'image à la taille du bloc, pour plus de détail je vous invite à consulter la doc officielle chez Microsoft.

Bizarrement, l'url de l'image dans la propriété filter doit être relative à la page html, et non à la feuille de style, pensez-y si les 2 fichiers ne sont pas au même niveau.

Un problème de liens...

Vous allez maintenant vous rendre compte que les liens à l'intérieur de notre bloc ne fonctionnent pas... plutôt bloquant.

Pour y remédier, il faut alors rajouter la propriété position:relative aux liens :

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#test{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fond.png', sizingMethod='crop');
}	
#test a{
	position:relative;
}
</style>		
<![endif]-->

Et voilà, les liens redeviennent cliquables.

Cas d'une image dans le corps de page

Ici une seule condition : les attributs width et height de l'image doivent être fixés.

Le principe consiste à remplacer l'image par un gif transparent et lui appliquer en fond le png grâce à l'attribut filter ci-dessus. Ce comportement peut être automatisé grâce à un fichier htc (à télécharger en annexe). On applique simplement ce comportement aux images, avec la propriété CSS behavior :

img{
	behavior: url("png.htc");
}

pour affiner la chose, on peut choisir de l'utiliser dans une classe :

img.png{
	behavior: url("png.htc");
}

<img src="image.png" width="100" height="100" alt="" class="png" />

Placez de préférence les fichiers png.htc et blank.gif au même endroit que votre page html. Ici encore, l'url du fichier htc doit être relative à la page html, et non à la feuille de style.

Bien évidement, behavior et filter ne sont pas des propriétés valides. Encore une fois utilisez les commentaires conditionnels ;)

Pour conclure, je vous conseille de rester prudent avec ces techniques sur des projets sensibles (et des clients pointilleux... ;) ), et prenez le temps de tester "en conditions réelles" avant de vous prononcer sur la faisabilité.

Pablo Prieto - Blog - png

IE6 et PNG, je t'aime moi non plus

Cas d'un PNG dans une CSS (en image de fond)

Un problème de liens...

Cas d'une image dans le corps de page