J’ai exagéré l’exemple, mais pas tant que ça à bien y penser. La compatibilité navigateurs est un problème bien répandu et un aspect majeur à prendre en considération pendant tout le processus de développement. Et pour les moins habitués et pour les plus expérimentés, je vais vous donner des astuces, des “cheats” et des conseils pour améliorer votre travail.

Si vous insérez une image PNG sur votre site, elle sera quand même affichée sous IE5 et IE6, mais la transparence ne sera pas gérée. C’est suffisant pour gâcher une belle mise en forme du site. On ne doit plus s’empêcher d’utiliser ce format d’images pour cette raison, car c’est si facile de régler le problème. Je vous montrerai quelques façons simples, avec leurs avantages et inconvénients.

Alors voilà pour le premier truc pour permettre un affichage adequat des fichiers .png dans vos projets web. Ce truc a été tiré à l’adresse suivante : http://homepage.ntlworld.com/bobosola/index.htm. Il consiste simplement, grace à un fichier javascript, d’appliquer la gestion de la transparence des fichiers. C’est une solution très simple et facile à utiliser.

Vous avez besoin de :

1. Votre site
2. Le code décrit plus bas.

Premièrement, créez un fichier nommé pngfix.js (vous pouvez, si vous le voulez, choisir un autre nom), placé dans le même répertoire que vos fichiers .html (vous pouvez aussi le mettre ailleurs, mais sachez bien identifier le chemin d’accès à la prochaine étape. Copiez-collez ce code à l’intérieur de ce fichier :

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
 
Use in  with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<mce:script defer type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></mce:script>
<![endif]-->
 
*/
 
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
 
if ((version &gt;= 5.5) &amp;&amp; (document.body.filters))
{
   for(var i=0; i"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

Puis, dans le header de votre .html, c’est à dire quelque part entre les balises et , placez-y ces lignes :

<!--[if lt IE 7]>
<mce:script defer type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></mce:script>
<![endif]-->

Bien sur, si vous avez choisi un autre nom ou un autre dossier que “pngfix.js”, modifiez le dans la deuxième ligne, où c’est écrit src=”pngfix.js”.

Il y a plusieurs avantages, mais aussi quelques inconvénients à cette solution. Dans les avantages :

• Simple, rapide et efficace
• Très léger en poids, mais aussi en traitement
• Passe à la validation du W3C, puis fonctionne avec les doctype Strict et Transitionnal
• À ma connaissance, elle est largement utilisée

Dans les inconvénients :

• Ne fonctionne pas avec les images du CSS
• Le javascript doit être activé pour que ça fonctionne
• Ne fonctionne pas pour les versions d’internet explorer moins récentes que 5.5

Nous verrons alors la prochaine fois comment faire afficher correctement les .png avec vos stylesheets CSS!

Celle-ci a été développée par Angus Turnbull. Vous pouvez voir son site : www.twinhelix.com.

Premièrement, ajoutez dans le dossier qui contient vos fichiers html, le fichier suivant: iepngfix.htc . Vous pouvez le mettre ailleurs, mais pensez à modifier le chemin d’accès dans les étapes suivantes.

Ensuite, ajoutez ce code dans le header de votre document HTML :
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>

Bien sur, si vous avez mis le fichier .htc ailleurs que dans le dossier des .html, changez le chemin d’accès dans la deuxième ligne. Le chemin d’accès doit être relatif au fichier html (et non un chemin absolu à partir de la racine du site).

Enregistrez l’image suivante dans le même dossier que vos fichiers .html sous le nom de blank.gif. Si vous la placez ailleurs, ouvrez le fichier iepngfix.htc et à la ligne 16 et éditez le chemin d’accès. Encore, le chemin doit être relatif au document html.

image: (cliquez droit sur le lien et sélectionnez “enregistrer la cible du lien sous”)

Voilà l’information basique par rapport à ce fix, mais vous pouvez approfondir en lisant l’information fournie par l’auteur du fix à l’intérieur du dossier compressé iepngfix.zip. (Vous y trouverez d’ailleurs tous les fichiers ci-haut) Vous pouvez aussi aller sur son site (www.twinhelix.com).

En bref, c’est selon moi le fix le plus efficace puisqu’il gère de nombreuses situations où les fichiers png peuvent poser problème dans Internet Explorer.

Si jamais votre serveur pose problème pour l’accès au fichier .htc, vous pouvez suivre les instructions fournies dans le .html, qui se sert d’un fichier php pour inclure le fichier.