Les instructions conditionnelles

Les instructions conditionnelles, aussi appelées commentaires conditionnels ou expressions conditionnelles (Conditional Comments en anglais), sont de simples commentaires HTML que seul Internet Explorer prend en compte. On parle d'instructions conditionnelles, car ce système se base sur les instructions conditionnelles utilisées en Javascript (si ceci, alors cela ).

Voici un exemple :
Citation : Exemple

• Test du code (IE Only)

Ce qui se trouve entre les premiers crochets est la condition. Dans cet exemple simple, le code entre la balise d'ouverture et la balise de fermeture du commentaire est pris en compte, si et seulement si le navigateur utilisé est Internet Explorer (condition if IE => si IE). C'est-à-dire que sous IE, la balise H1 sera prise compte, alors que sous un autre navigateur, elle ne le sera pas.

De prime abord, cela na pas l'air très utile. Mais imaginez : si le navigateur est IE, vous pouvez afficher une feuille de style qui lui est toute destinée, sans devoir vous encombrer de script de détection de navigateur, un peu comme ceci :

Citation : Exemple

Dans cet exemple, si le navigateur n'est pas IE, la condition retourne false (faux), et la feuille style_ie.css (qui fait office de patch pour corriger ce qu'IE n'affiche pas bien par rapport à Firefox) n'est pas chargée. Seule style_ff.css est chargée. Si par contre le navigateur est IE, style_ff.css est toujours chargée, mais la condition retourne true (vrai), et la feuille style_ie.css est chargée..



En réalité, il existe 2 types de commentaires conditionnels :

Type	Syntaxe	Validité	Utilité
downlevel-hidden	<!--[if expression]> HTML <![endif]-->	Valide	Permet afficher du code si le navigateur est IE
downlevel-revealed	<![if expression]> HTML <![endif]>	Non valide	Permet de masquer du code si le navigateur est IE

Les expressions

Dans les exemples précédents, nous avons vu simplement comment afficher quelque chose si le navigateur est IE. Mais il est possible de spécifier une version particulière d'IE, une série de version (version supérieure à la version 5 par exemple)... Voici un petit tableau reprenant les différentes expressions :

IE	Toutes les versions d'IE
IE 7	IE 7
IE 7.0b	IE 7.0 Beta
IE 6	IE 6
IE 5.5	IE 5.5
IE 5.0002	IE 5.0 de Windows 2000
IE 5.0	IE 5
IE 5	IE 5 (et pas IE 5.5)
IE x.xxxx	Version spécifique d'une des versions.

La version IE x.xxxx (les x sont des chiffres) représente une version spécifique d'une version d'IE. Par exemple, ceci : IE 6.0260 est une version spécifique de IE 6.0. Il faut faire attention de ne pas mettre de . dans la chaîne décimale. Ceci n'est pas bon : IE 6.0.260 ! Je vous accorde que l'utilité de cette astuce relève de la pure folie, car connaître sur le bout des doigts les différents sous-versions d'IE, faut être doué (au fait, ce numéro est en fait la version de mon IE. Vous n'avez sûrement pas la même. Je peux vous dire aussi qu'une des sous version de IE 5 est la 5.0453. Je l'ai vu sur MSDN en rédigeant ce tuto ).

Dans l'exemple suivant, H1 est affiché si la version est la 6., et H2 est affiché si la version est la 5.0

Citation : Exemple

Les opérateurs

Item	Exemple	Discription
!	[if !IE 6]	n'est pas (négation)
lte	[if lte IE 6]	inférieur ou égal à
lt	[if lt IE 6]	inférieur à
gt	[if gt IE 5.5]	supérieur à
gte	[if gte IE 6]	supérieur ou égal à
( )	[if (IE 7)]	sert à isoler une expression (voir ci-dessous pour l'utiliser)
&	[if (gt IE 5)&(lt IE 7)]	Opérateur AND. Toutes les conditions doivent être remplies
|	[if (IE 6)|(IE 7)]	Opérateur OR. Au moins une des conditions doit être remplie

Voici un exemple qui met en lumière ces opérateurs. La balise H1 sera affichée si le navigateur est IE 5 et + :

Citation : Exemple



Ce code n'est pas d'une grande utilité, puisqu'il englobe toutes les versions d'IE (IE 4 ne supporte pas les commentaires conditionnels). L'exemple suivant est plus utile :

Citation

Voici ce code, qui permet de cacher du contenu à IE, et pas à un autre navigateur :

Citation : Exemple

Le fonctionnement de ce script est assez simple.

Si le navigateur n'est pas IE (il y a l'opérateur ! ), pas de problème, tout ce qui est à l'intérieur est ignoré par IE. Mais si le navigateur est Opera par exemple (on ne va pas prendre tout le temps Firefox non plus ), celui-ci va lire le code, en commençant par <!--[if !IE]>. Il ne comprend pas cette condition, ce qui est normal. Alors, il continue à lire le code, et rencontre <-->. Ah, très bien. C'est un tag de fermeture de commentaire. Le commentaire conditionnel est donc fermé, pour Opera. Celui-ci affichera donc la balise H1, puisqu'elle ne figure pas dans un commentaire. Le petit Opera continue sa lecture, et rencontre <!-->, qui est un tag d'ouverture de commentaire qui est directement suivit, après la fermeture de l'instruction, par le tag -->, qui symbolise le tag de fermeture d'un commentaire. C'est tout !

Voici, pour finir cette partie, le script parfait qui affiche juste style_ie.css si le browser est IE, et qui affiche juste style_ff.css si le navigateur n'est pas IE :

Citation : Exemple

• Test du code (avec balises H2)

Voilà qui clôture (ça me fait penser à Zozoz ça, les clôtures ) la partie dédiée aux instructions conditionnelles.

Liens

• Conditional Comments sur MSDN
• Commentaires conditionnels sur Blog and Blue
• Qu'est-ce que les commentaires conditionnels, sur Alsacreations

Bug de coloration

Plusieurs personnes m'ont fait part d'un petit problème dans la coloration de Notepad++. J'ai donc installé le bloc-notes ++ pour vérifier, et effectivement, le gratuiciel se plante dans la coloration de la balise de fermeture de l'expression conditionnelle « afficher si ce n'est pas IE ». Je vous ai fait 2 jolis petits screenshots du problème (un sous Notepad++, ou ça va mal, et un sous Dreamweaver, ou ça va bien (normalement, les commentaires son en gris sous DW, mais j'ai modifié la coloration, l'orange est plus visible (j'ai aussi changé l'arrière-plan Le gris fait moins mal au yeux ))) :



smilz m'a dit que si on met un commentaire vide juste après l'expression conditionnelles, ça résout le problème. C'est à tester (c'est ceci le commentaire vide : <!---->).