Les commentaires conditionnels pour Internet Explorer

Astuce par (Lyon, France)
Créé le , mis à jour le (261014 lectures)
Tags : compatibilité, navigateurs, xhtml, internet explorer, html, explorer, commentaire

Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d'inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l'une ou l'autre de ses versions.

Techniquement, il s'agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s'il doit interpréter le contenu du commentaire ou bien l'ignorer.

Les commentaires conditionnels sont compris par Internet Explorer depuis la version 5.0 mais sont officiellement abandonnés à partir d'Internet Explorer 10.

Syntaxe de base

L'exemple le plus simple de commentaire conditionnel est le suivant:

<!--[if IE]>
  Ici votre code HTML réservé à IE.
<![endif]-->

Rappel: un commentaire conditionnel ne peut être inséré que dans un document (X)HTML, et ne peut contenir que des instructions (X)HTML et non CSS.

Exemple d'utilisation:

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

Viser une version ou un éventail de versions

Les commentaires conditionnels ne se limitent bien entendu pas à l'appel d'une feuille de styles, et peuvent être utilisés n'importe où dans un document (X)HTML.

Pour réserver du code HTML à une ou plusieurs versions spécifiques d'IE, ce code devient:

<!--[if comparaison IE version]>
	Code lu par les versions d'Internet Explorer visées.
<![endif]-->

La comparaison peut être:

  • = (pas de mot-clé);
  • > (mot-clé gt pour «greater than»);
  • ≥ (mot-clé gte pour «greater than equal»);
  • < (mot-clé lt pour «less than»);
  • ≤ (mot-clé lte pour «less than equal»).

Voici une série d'exemples commentés, peut-être plus parlants:

<!--[if gte IE 6]> pour IE 6.0 et version plus récentes <![endif]-->

<!--[if IE 5.0]> pour IE 5.0 <![endif]-->

<!--[if IE 5.5000]> pour IE 5.5 <![endif]-->

<!--[if IE 6]> pour IE 6.0 <![endif]-->

<!--[if IE 7]> pour IE 7.0 <![endif]-->

<!--[if IE 8]> pour IE 8.0 <![endif]-->

<!--[if IE 9]> pour IE 9.0 <![endif]-->

<!--[if gte IE 7]> pour IE 7 et supérieur <![endif]-->

<!--[if lt IE 7]> pour IE inférieur à IE 7 <![endif]-->

<!--[if lte IE 6]> pour IE 5.0, IE 5.5 et IE 6.0 mais pas IE7.0 et plus <![endif]-->

<!--[if (lt IE 6)|(IE 8)]> pour IE inférieur à IE 6.0 ou si IE 8 <![endif]-->

<!--[if (gt IE 5)&(lt IE 7)]> pour IE supérieur à IE 5.0 et inférieur à IE 7 <![endif]-->

<!--[if !IE]><!--> si ce n'est pas IE <!--<![endif]-->

Attention: l'installation de plusieurs versions d'Internet Explorer en parallèle sur un même système peut poser un problème: dans certains cas, toutes les versions d'IE interprèteront les commentaires conditionnels comme si elles étaient la version d'IE la plus récente parmi celles installées.

Multiple IE proposé par Tredosoft ne présente heureusement pas ce problème, pas plus qu'IETester. En cas de problème avec ces outils ou d'autres outils équivalents, on pourra aussi tester avec des versions natives d'Internet Explorer, sur d'autres postes de travail ou dans des machines virtuelles.

Ressources