Commentaire dans le code HTML

Dans la spécification W3C, un commentaire commence par .

C'est le résumé le plus simplifié de ce qu'écrit la spécification, dans un paragraphe qui est sans doute un des plus obscurs de l'histoire du W3C... (le chargement de la page de la spec. prend un moment).

Un commentaire est quelque chose qui s'adresse aux développeurs et n'est pas affiché par les navigateurs et on insère un commentaire ainsi:

<!--
...un petit croquis vaut mieux qu'un long discours...
-->

Cependant la syntaxe a été développée par Microsoft pour permettre d'inclure du code conditionnel, HTML ou CSS. C'est ce que Microsoft appelle les "Conditional Comments ", les commentaires conditionnels.

Code conditionnel

En plaçant du code dans un commentaire conditionnel, on le rend accessible ou non au moteur de rendu du navigateur selon la condition.

Il existe deux type de commentaires conditionnels, ceux dont le contenu est ignoré par les navigateurs qui n'interprêtent pas l'expression conditionnelle, et ceux dont le contenu au contraire sera toujours pris en compte.

Commentaire dont le contenu doit être ignoré par les autres navigateurs

Pour Internet Explorer, la prise en compte du contenu dépend de ce que la condition soit satisfaite.

 <!--[if expression]> 
     HTML 
<![endif]-->

Ce que voient les autres navigateurs:

 <!--[if expression]>
    HTML
<![endif]-->

Tout ce qui se trouve entre les balises ouvrante et fermante est un commentaire et doit être ignoré.

Commentaire dont le contenu doit être pris en compte par les autres navigateurs

Dans le cas d'Internet Explorer, le contenu sera pris en compte seulement si la condition de l'expression est remplie.

 <![if expression]> 
    HTML 
<![endif]>

Ce que voient les autres navigateurs:

 <![if expression]> 
    HTML 
<![endif]>

Les balises ouvrantes et fermantes ne font pas partie du standard HTML, elles sont ignorées et par conséquent le contenu lui, est pris en compte.

HTML, JavaScript, CSS

Le contenu peut être n'importe quel code HTML. Ce peut être du code CSS introduit par le balise <style>, ou du code JavaScript introduit par la balise <script>.

Expressions conditionnelles

Ces expressions concernent la version du navigateur.
En outre les valeurs true ou false, sont des expressions inconditionnelles prises en compte seulement par Internet Explorer.

Expressions de base

[if IE] vrai si le navigateur est Internet Explorer.

[if IE 8] vrai si le navigateur est la version 8 d'Internet explorer.

Expressions relationnelles

[if lt IE 8] vrai si le numéro de version du navigateur est inférieur à 8.

[if lte IE 8] si inférieur ou égal à 8.

gt: supérieur.

gte: supérieur ou égal.

Expressions logiques

[if !IE] vrai si le navigateur n'est PAS Internet Explorer.

Avec l'opérateur de regroupement () on peut réaliser des combinaisons logiques.

[if !(IE 8)] si ce n'est pas IE8.

[if (gte IE 7) & (lt IE 9)] pour les versions d'Internet Explorer supérieures ou égale à 7 et inférieures à 9.

[if (IE 6) | (IE 7)] pour la version 6 ou 7.

Expressions inconditionnelles

[if true] toujours vrai.

[if false] toujours faux.

Démonstrations

Code pour Internet Explorer 7 et suivants:

<!--[if gte IE 7]>
<p><b>Ceci s'affiche à partir d'Internet Explorer 7.</b></p>
<![endif]-->

Code toujours pris en compte mais par IE seul:

<!--[if true]> 
<p><b>Ceci s'affiche si le navigateur reconnaît les commentaires inconditionnels.</b></p>
<![endif]-->

Message pour les utilisateurs d'IE 8 et tous autres navigateurs:

<![if gte IE 8]>
<p><b>Vous avez raison d'utiliser un navigateur moderne.</b></p>
<![endif]>

Vous avez raison d'utiliser un navigateur moderne.

JavaScript pour IE seul:

<!--[if IE]>
<script language="javascript">
alert("Vous utilisez d'Internet Explorer.");
</script>
<![endif]-->

Message pour les seuls utilisateurs d'IE 6 (ou antérieures):

<![if lte IE 6]>
<p><b>Vous devriez passer à une version supérieure.</b></p>
<![endif]>