Transparence des PNG avec IE6
Le web design moderne, dit « web2″ a révolutionné l’esthétique des sites internet. Epuration des lignes graphiques, utilisation massive des blanc-noir-gris + une couleur, effets de réflexion, ou de transparence des éléments visuels. Oui mais…
Les formats d’image numérique gérant la transparence
La transparence des images sur internet peut être gérée par deux formats d’image: le GIF ou le PNG.
Le GIF (Graphik Interchange Format) est un format d’image, très léger et qui « comprend » la transparence. C’est à dire qu’un pixel de l’image peut être soit plein, soit vide. Il peut être utilisé dans les pages web, et la transparence est reconnue par tous les navigateurs.
Le PNG (Portable Network Graphik) est un format d’image plus récent, qui a été crée pour contourner et améliorer l’utilisation du GIF sur le web. Il permet d’obtenir une qualité d’image plus lisse, de meilleurs dégradés de couleur, et une opacité qui n’est plus « on/off » mais variable: un pixel peut être opaque à 0%, 20%, 70%, 100%.
Le PNG est donc devenu le format d’image gérant la transparence le plus utilisé sur la toile, pour sa flexibilité et son meilleur rendu.
PNG et navigateurs
Tant que l’image au format PNG est totalement opaque, elle sera « lue » et affichée correctement par tous les navigateurs.
Mais lorsque l’image comprend des pixels plus ou moins, voire totalement transparents, tous le navigateurs n’afficheront pas la même chose!
Tous les navigateurs récents l’afficheront sans problème, mais l’ancienne version d’Internet Explorer, IE6, rechigne à suivre la norme et affiche ce qui est transparent en… gris opaque!
L’effet est affreux à voir, et je militerais volontiers pour l’abandon pur et simple de ce navigateur obsolète, mais il reste malheureusement très utilisé, notamment en entreprise. (voir l’article Le casse tête des navigateurs internet  publié l’an dernier dans ce blog)Â
Mais bon, il faut être consciencieux, et adapter le design d’un site internet à défaut d’adapter les internautes!
Rendre la transparence du PNG pour IE6
Heureusement, plusieurs parades existent. Voici ma préférée:
Librairie Javascript DD_belatedPNG
Cette librairie Javascript va permettre à IE6 d’interpréter correctement la transparence. Elle a été créée par Drew Diller.
étape 1: télécharger la librairie sur le site dillerdesign.com (le lien se trouve en bas de l’article). La librairie n’est pas lourde (12ko).
étape 2: appeler la librairie dans l’entête de la page HTML
étape 3: toujours dans l’entête, définir sur quelles class CSS et éléments HTML appliquer le script
Exemple:
Voici à quoi ressemble la page web:
<html>
<head>
<title>Ma page web</title>
<!–[if IE 6]>Â
 <script src= »librairies/DD_belatedPNG_0.0.8a.js »></script>
 <script>
  DD_belatedPNG.fix(‘.fond-transparent, .image-transparente’);
 </script>
<![endif]–>
<style type= »text/css »>
body { background-color:red; }
 .fond-transparent { background-image:url(images/fond-transparent.png); }
</style>
</head>
<body>
<div class= »fond-transparent »>
<img src= »images/mon-image-transparente.png » class= »image-transparente » title= »titre de mon image » />
</div>
</body>
</html>
Le code <!–[if IE 6]> <![endif]–> permet de n’appeler la librairie que si le navigateur utilisé est IE6, donc on n’encombre pas la connexion si l’internaute se sert d’un autre navigateur
C’est magique, ça marche, et c’est bien utile!
Liens utiles:
Wikipedia:
le format GIF http://fr.wikipedia.org/wiki/Graphics_Interchange_Format
le format PNG http://fr.wikipedia.org/wiki/Portable_Network_Graphics
Dillerdesign:
Télécharger la librairie DD_belatedPNG http://www.dillerdesign.com/experiment/DD_belatedPNG/
