Quiconque s’est déjà essayé à la création d’un site web s’est forcément heurté à l’épineux problème de la compatibilité entre les navigateurs, en particulier avec les anciennes versions d’Internet Explorer (6 et 7). Malheureusement, ils représenteraient encore à eux deux entre 15 et 20% des visites. En bon webmaster, il est donc impossible de les ignorer.
Fort heureusement, il existe une méthode simple et respectueuse des standards web pour satisfaire leurs petits caprices sans souiller le joli code que l’on a écrit pour des navigateurs plus récents : les CSS conditionnelles.
CSS conditionnelles : la solution élégante pour navigateurs capricieux
Une CSS conditionnelle est une feuille de style appelée au début d’une page HTML qui est uniquement chargée et traitée en fonction du navigateur utilisé par le visiteur. Ce n’est ni un javascript, ni un “hack” CSS. C’est simplement une syntaxe de commentaires un peu particulière mais totalement acceptée comme standard web. Les paramètres contenus dans les CSS conditionnelles viennent écraser ceux de la CSS primaire qui est chargée par défaut.
Voici un exemple ci-dessous :
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- On appelle la CSS primaire, commune à tous les navigateurs -->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="win-ie7.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="win-ie6.css" />
<![endif]-->
</head>
</html>
Dans cet exemple, la CSS primaire (main.css) est d’abord appelée dans tous les cas.
Puis, la première CSS conditionnelle (win-ie7.css) est appelée si le visiteur utilise Internet Explorer 7. Enfin, si le visiteur est assez fou pour utiliser Internet Explorer 6, c’est la seconde CSS (win-ie6.css) qui sera chargée en plus de la CSS primaire.
Les CSS conditionnelles pour IE 7 et IE 6 permettent d’ajouter quelques touches de finitions et de corriger divers bugs d’affichage sans rendre le code de départ obsolète, puisqu’un navigateur plus récent ignorera tout simplement ces instructions.
Comment contrôler l’affichage dans les vieux navigateurs ?
Maintenant que vous savez comment isoler proprement les paramètres CSS destinés spécifiquement à des navigateurs qui n’en font qu’à leur tête, vous vous trouvez probablement devant un problème majeur : pouvoir vérifier l’affichage de votre site sous différents navigateurs et systèmes d’exploitation.
Il existe différents services dont le principe est de prendre des captures d’écrans de votre site depuis divers navigateurs. Le meilleur à ma connaissance et celui que je recommande vivement est Adobe Browserlab qui est pour le moment gratuit (il suffit de créer un Adobe ID). La vitesse de chargement des screenshots peut varier mais on n’attend généralement pas plus de 2 minutes avant d’avoir une fournée complète de captures prises sous la plupart des navigateurs utilisés à ce jour.
J’utilise également un soft appelé IE Tester qui émule des versions précédentes d’Internet Explorer. Le principal avantage de ce petit logiciel est qu’il permet de tester l’interaction (les liens, les boutons, etc.) avec le site et pas seulement l’affichage comme le fait Browserlab. Cela peut être très important si par exemple vous souhaitez vous assurer qu’un formulaire de commande fonctionne correctement quel que soit la configuration de l’utilisateur.
Pour aller plus loin
Si la compatibilité de votre site web vous importe (et elle devrait), je ne peux que vous recommander d’acheter immédiatement le livre de Jeffrey Zeldman intitulé Designing with web standards (3rd Edition). Sorti en 2010, c’est à ma connaissance la référence parfaite pour quiconque souhaite comprendre les enjeux des standards web et comment résoudre les problèmes de compatibilité entre navigateurs.
PS : Les curieux remarqueront peut-être que la méthode décrite dans cet article n’est pas appliquée à ce blog. Par manque de temps, je n’ai pas encore pu m’occuper à rendre ikôn totalement compatible avec IE 7 (et encore moins avec IE 6). Mea culpa, donc…mais faites ce que je dis, pas ce que je fais !