Les commentaires conditionnels
Souvent, ce sont les anciennes versions d'Internet Explorer qui vont vous poser problème. Comme certaines d'entre elles sont toujours utilisées, vous devez apprendre à composer avec.
Heureusement, il existe une technique très pratique pour adapter votre code aux anciennes versions d'Internet Explorer. Grâce à des commentaires conditionnels, vous pouvez faire en sorte qu'une portion du code HTML soit lue uniquement par certaines versions d'IE. Ce sont des commentaires HTML qui ont une forme un peu spéciale et qui ne seront lus que par IE.
<!--[if IE]> Code HTML réservé à IE <![endif]--> |
L'ensemble forme un commentaire HTML : il commence par <!-- et se termine par -->. Les navigateurs ignoreront donc le code qui se trouve à l'intérieur… sauf IE, qui y voit une condition [if IE]signifiant « Si c'est Internet Explorer ».
L'intérêt est que cette technique permet de cibler différentes versions d'Internet Explorer. Par exemple :
<!--[if IE8]> |
… ciblera uniquement Internet Explorer 8.
On peut utiliser les symboles suivants pour viser un ensemble de versions :
Ainsi :
<!--[if lte IE8]> |
… signifie « Toutes les versions d'Internet Explorer inférieures ou égales à IE8 » (c'est-à-dire IE8, IE7, IE6…).
À l'inverse, on peut cibler les navigateurs autres qu'Internet Explorer avec la syntaxe suivante :
<!--[if !IE]><!--> Code HTML pour les navigateurs différents d'IE <!--<![endif]--> |
La syntaxe a l'air un peu complexe, mais l'astuce est bien conçue. Si vous regardez bien, il y a deux balises de commentaires. Le code HTML se trouve en-dehors des balises de commentaires, il sera donc lu par tous les navigateurs… sauf IE, qui lit les commentaires lui demandant de ne pas lire le code HTML qui suit.
À quoi servent les commentaires conditionnels ?
On peut utiliser les commentaires conditionnels pour afficher un message à destination des vieilles versions d'Internet Explorer : « Attention, vous naviguez avec un navigateur très ancien, mettez-vous à jour… ».
Cependant, on s'en sert surtout pour charger des feuilles de style spéciales pour IE :
<!--[if lte IE8]> <link rel="stylesheet" href="style_ie.css" /> <![endif]--> |
La feuille style_ie.css sera lue ici uniquement par les versions d'IE inférieures ou égales à IE8. À l'intérieur, on peut « adapter » le code CSS pour faire en sorte que le site s'affiche mieux sur ces navigateurs. À vous de modifier la dimension des éléments si nécessaire, d'utiliser d'autres méthodes de positionnement plus adaptées, etc.
Cependant, vu qu'il y a plusieurs versions d'Internet Explorer en circulation (IE6, IE7, IE8, IE9…), une feuille de style ne suffit pas. Parfois, on voudra effectuer une modification uniquement pour IE6 et IE7, parfois uniquement pour IE6, parfois pour IE8 et IE9… À moins de créer une feuille de style par version, on ne s'en sort pas. Mais cela fait alors beaucoup de fichiers .css à gérer.
La solution, régulièrement employée par les webmasters expérimentés aujourd'hui, consiste à donner un nom de classe à la balise <body> qui englobe le corps de la page. Ce nom de classe indiquera dans le fichier .css le nom de la version d'IE correspondant au navigateur. Dans ce cas, un seul fichier CSS suffit. Par exemple, si on écrit :
<body class="ie8"> |
… cela nous donnera dans le fichier CSS l'information que le navigateur est IE8. On peut ensuite, dans ce fichier CSS, écrire :
.ie8 nav { /* Modification du style de la balise nav pour IE8 */ } |
Avec les commentaires conditionnels, on peut écrire plusieurs versions de la balise <body> en fonction du navigateur :
<!--[if IE6]><body class="ie6 old_ie"><![endif]--> <!--[if IE7]><body class="ie7 old_ie"><![endif]--> <!--[if IE8]><body class="ie8"><![endif]--> <!--[if IE9]><body class="ie9"><![endif]--> <!--[if !IE]><!--><body><!--<![endif]--> |
On peut donner plusieurs noms de classes à une balise, en les séparant par un espace comme on l'a fait ici. Ainsi, si le navigateur est IE6, la balise <body> aura deux classes : ie6 et old_ie (old IEsignifie « vieil IE » en anglais). La classe old_ie permet donc de cibler simultanément IE6 et IE7.
Créé avec HelpNDoc Personal Edition: Créer des documents d'aide HTML facilement