Assurer la compatibilité avec IE

Depuis Internet Explorer 9 (IE9), nous n'avons plus vraiment de raisons de nous plaindre du légendaire retard d'Internet Explorer dans la gestion du CSS. Voyez vous-mêmes le résultat (figure suivante), il est très bon sur ce navigateur sans aucune adaptation nécessaire.

Le site sous IE9 : aucun problème à signaler !

Par contre, vous risquez d'attraper quelques cheveux blancs en regardant le résultat sur les anciennes versions d'Internet Explorer.

Comment je fais pour voir le résultat sous IE6 à IE8, si je suis équipé d'IE9 ?

Je vous avais parlé d'IETester, un outil pratique mais instable (il plante souvent). Vous pouvez l'essayer pour tester votre site sur les anciennes versions d'IE.

Il y a cependant une solution plus stable et plus rapide : appuyez sur la touche F12 de votre clavier lorsque vous êtes sous IE9 et une barre dédiée aux développeurs web apparaît. Là, un menu vous permet de changer le comportement d'IE (figure suivante) afin de simuler les anciennes versions (à partir de IE7).

Changement du moteur de rendu sous IE

Là, en général, il arrive qu'on prenne très peur. 
La figure suivante vous montre ce qu'on obtient en « mode IE7 ».

Le site sous IE7 : rien ne s'affiche correctement !

Avant de préparer votre valise pour aller vivre en Patagonie loin de ce monde cruel, laissez-moi vous redonner le moral avec cette phrase rassurante : tout problème a une solution (répétez cela autant de fois que nécessaire).

En fait, notre site ne rencontre que deux problèmes principaux sur les anciennes versions d'IE :

• Le positionnement inline-block n'est pas bien géré sous IE6 et IE7, ce qui fait que la plupart de nos positionnements ne fonctionnent pas pour le moment… Mais nous avons vu qu'une astuce permet de régler le problème sans trop d'efforts !
• Les balises structurantes de HTML5 (<header>, <nav>, <aside>…) ne sont pas gérées sous IE6, IE7 et IE8, ce qui pose de gros problèmes d'affichage… Mais, là encore, un petit script ajouté au début de votre code HTML permet de régler le problème !

Par contre, il faudra faire une croix sur certaines fonctionnalités plus récentes de CSS3 qui ne sont pas gérées sur ces vieilles versions :

• les coins arrondis ;
• les images de fond multiples ;
• la transparence ;
• les ombres.

Étant donné que ce sont des fonctionnalités liées à l'apparence, nous ne chercherons pas à les faire fonctionner sur les anciennes versions d'IE. Si toutefois vous y tenez, sachez que, là encore, des scripts existent et permettent d'émuler la plupart de ces fonctionnalités manquantes, mais cela vous demandera pas mal de travail supplémentaire et votre site risque d'être plus lent sur ces navigateurs. Du moment que le site reste lisible sur les anciennes versions d'IE, je vous recommande de ne pas vous préoccuper trop de ces problèmes.

Lorsqu'on accepte que son site soit « un peu moins beau » sur les anciennes versions des navigateurs, on dit qu'on fait une dégradation gracieuse. Cela veut dire qu'on ne cherche pas à obtenir tous les effets, mais on s'efforce d'avoir un site qui reste quand même lisible sur les vieux navigateurs.

Faire fonctionner les balises structurantes de HTML5

Nous l'avons vu, il suffit d'ajouter un simple bout de code JavaScript dans l'en-tête de son site et le tour est joué (lignes 6 à 8) :

Le fichier JavaScript sera téléchargé depuis les serveurs de Google : c'est une technique rapide qui vous évite d'avoir à gérer vous-mêmes le fichier. Si vous le souhaitez, vous pouvez aussi en récupérer une copie et la placer à côté des fichiers de votre site.

Régler le positionnement inline-block

Pour gérer le positionnement inline-block, nous avons vu qu'il était nécessaire de créer une feuille de style spéciale pour les anciennes versions d'Internet Explorer. Il faut utiliser un CSS un peu différent pour que les vieilles versions d'IE « comprennent » ce qu'il faut faire.

En créant une feuille de style spéciale pour les vieilles versions d'IE (qu'on pourrait appelerstyle_ie.css) et en utilisant la technique ci-dessous, on peut reproduire le comportement des inline-block :

La feuille de style style_ie.css contiendra des déclarations comme celle-ci :

Cette technique doit être appliquée sur chaque élément positionné en inline-block.

D'autres différences existent sur les vieilles versions d'IE : le texte n'est pas toujours à la bonne taille, certains blocs sont eux aussi mal dimensionnés, etc. Ces différences doivent être réglées au cas par cas dans la feuille style_ie.css.

Créé avec HelpNDoc Personal Edition: Générateur facile de livres électroniques et documentation