Quelques hacks pour Internet Explorer 6

L’une des priorités des webmestres, c’est que leurs sites s’affichent de la même manière sur tous les navigateurs du marché. Or, il existe encore des navigateurs comme Internet Explorer 6 qui ne respectent pas les normes et qui interprètent malheureusement le code à leur façon. L’objectif de ce billet est donc de dresser la liste des différents « hacks » que l’on trouve pour cet étrange navigateur. De quoi faire en sorte que vos projets web s’affichent enfin de la même manière sur Firefox, Safari et Internet Explorer 6.

C’est une bonne nouvelle pour pas mal de gens, Internet Explorer 6 est en train de vivre ses derniers jours. Il aura fallu attendre plusieurs années mais une nouvelle page est donc actuellement en train de se tourner. Oui, mais de nombreux internautes continuent encore d’utiliser ce navigateur vétuste et c’est la raison pour laquelle j’ai décidé de lister les différents « hacks » que je connais (et que j’ai souvent utilisé) pour ce navigateur.

1. Les hacks CSS pour Internet Explorer 6

Pour commencer, nous allons nous intéresser à quelques règles CSS qui vont nous permettre de choisir les propriétés à interpréter selon le navigateur utilisé. Cela peut vous paraître confus, mais nous allons voir qu’il n’en est rien. En réalité, nous allons jouer avec les défauts intrinsèques d’Internet Explorer 6 afin de le prendre à son propre piège.

1.1. La règle « !important » :

Cette règle peut s’appliquer à toutes les propriétés CSS. Globalement, une propriété accompagnée de la règle « !important » ne sera pas interprétée par Internet Explorer 6, uniquement par les autres navigateurs du marché. En la jouant finement, il est donc possible de rendre certaines propriétés invisibles aux yeux de ces derniers et donc de régler la plupart des bogues honteux du navigateur de Microsoft. L’exemple suivant vous permettra de mieux comprendre ce dont je parle :

div#mon_calque {
background-color:blue !important; background-color:green;
}

Dans cet exemple, nous définissons deux couleurs de fond pour notre calque. Dans ce cas, puisque Internet Explorer 6 est incapable de comprendre la règle « !important », il affichera un fond vert. Les autres navigateurs, eux, afficheront un fond bleu. En jouant avec les propriétés CSS les plus problématiques (je pense notamment aux « padding » et « margin »), il sera donc possible de résoudre la plupart des erreurs d’interprétation d’Internet Explorer 6.

Note : Il est aussi possible de noter « !background-color:green; » à la place de « background-color:green; !important » mais il faut savoir que seule cette dernière expression est valide W3C.

1.2. Le hack * html :

Toujours dans le même ordre d’idée, Internet Explorer 6 est totalement incapable de comprendre le marqueur « * ». Pour les autres navigateurs, il pointera tous les éléments se trouvant au-dessus de la balise « html ». Comme il n’y en a pas, les propriétés se trouvant à cet endroit ne seront pas interprétés. Internet Explorer 6, quant à lui, se laissera prendre au piège et interprétera donc tout ce qui se situera à cet endroit. Là encore, je vous propose l’exemple suivant :

* html body { background-color:blue; }
html body { background-color:green; }

Une fois de plus, nous avons défini deux couleurs de fond. Sachant que Internet Explorer 6 est incapable de comprendre le marqueur « * », il affichera la couleur bleue pour notre page. Les autres navigateurs, quant à lui, l’afficheront en vert.

1.3. Le hack underscore :

Même principe, il est également possible d’utiliser des caractères spéciaux pour rattacher des propriétés CSS à un navigateur spécifique. On notera d’ailleurs que cette méthode fonctionne aussi bien pour Firefox que pour Internet Explorer 6 ou encore Internet Explorer 7. L’exemple suivant parle de lui-même :

div#mon_calque {
width:400px; height:250px; margin:0 0; padding:0 0;
background-color:red; /* Pour tous les navigateurs */
/background-color:blue; /* Pour IE 7 seulement */
_background-color:green; /* pour IE6 seulement */
}

Note : Il est également possible d’utiliser ce « hack » pour Internet Explorer 7. En revanche, il faudra écrire « *+html {} » à la place de « * html {} ».

En jouant avec ces deux méthodes, il est possible de corriger la plupart des erreurs d’affichage d’Internet Explorer 6. Cela dit, si les CSS sont relativement puissantes, il arrive parfois qu’elles ne soient d’aucun secours. C’est la raison pour laquelle nous allons à présent nous intéresser aux « hacks » HTML.

2. Les hacks HTML pour Internet Explorer 6

Les astuces HTML pour Internet Explorer 6 fonctionnent sur le même modèle que les astuces CSS. Il s’agira en effet de faire en sorte qu’une partie de notre code ne soit compréhensible que de ce dernier, et pas des autres. Pour se faire, il existe plusieurs méthodes mais, la plus connue d’entre elles, c’est le commentaire conditionnel.

2.1. Le commentaire conditionnel :

Le commentaire conditionnel n’est pas vraiment un « hack », il s’agit plutôt d’un commentaire spécial qu’Internet Explorer 6 va interpréter volontairement. C’est à croire que les développeurs du programme avaient prévu le coup. Ces commentaires vont en effet nous permettre de faire passer du code qui ne sera compris que de leur navigateur. Là encore, un exemple vaut mieux que mille discours :

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="style_ie.css" mce_href="style_ie.css" />
<![endif]-->

Concrètement, cet exemple nous permet de définir une feuille de style spécifique pour Internet Explorer 6 et une autre feuille de style spécifique pour les autres navigateurs du marché. Attention par contre, parce qu’il est nécessaire d’appeler d’abord la feuille de style générale et ensuite la feuille de style pour IE.

Note : Il est possible d’utiliser les commentaires conditionnels pour les différentes versions d’Internet Explorer. Un « <!–[if IE 6]><![endif]–> » visera exclusivement Internet Explorer 6 alors qu’un « <!–[if IE 7]><![endif]–> » visera plutôt Internet Explorer 7.

2.2. La transparence PNG :

Là encore, il s’agit d’un bug auquel nous avons tous été confronté au moins une fois dans nos vies de développeur. Si tous les navigateurs sont capables d’interpréter la transparence des images au format PNG, il n’en est rien pour Internet Explorer 6 qui n’y entend rien du tout. Heureusement pour nous, il existe une méthode éprouvée (HTML+CSS)  qui nous simplifie grandement la vie.

Pour la partie HTML, à mettre dans le header de votre page :

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="style_png_fix.css" mce_href="style_png_fix.css" />
<![endif]-->

Et dans votre fichier « style_png_fix.css » :

* html img,
* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src="transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Pour avoir déjà essayé plusieurs solutions, cette dernière reste à mon sens la plus simple et la moins hasardeuse à mettre en place. Cela dit, en ce qui me concerne, je préfère tout simplement éviter les PNG transparents et m’assurer que mes images conviennent à tous les navigateurs du marché. C’est sans doute un peu plus long (on s’arrache parfois les cheveux) mais ça évite les mauvaises surprises.

Pour conclure, on peut rappeler que cette liste n’est certainement pas exhaustive mais que ce sont des astuces éprouvées qui m’ont souvent sauvé la vie. Alors bien sûr, les développeurs se posent pas mal de questions sur le sujet. Certains se demandent même s’il n’est pas préférable de ne pas se préoccuper d’Internet Explorer 6 afin de pousser les internautes à changer, ou mettre à jour, leur navigateur. En ce qui me concerne, je sais au moins une chose : lorsqu’on bosse sur un projet pour un client, on ne peut pas se permettre de se poser ce genre de questions. Le client paye pour un site, il faut donc s’assurer qu’il s’affiche de la même manière quel que soit le navigateur utilisé.

Crédits Photo