Aller au menu - Aller au contenu

Icône Les instructions conditionnelles

Par Avatar Sébastien de la Marck (Thunderseb)
Mise à jour : 12/05/2009
1 640 visites depuis 7 jours , dont 415 sur ce chapitre , classé 85/777
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Introduction

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
<!--[if IE]>
<h2>Titre de la page si IE</h2>
<![endif]-->


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
<link href="style_ff.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->


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..

Au fait, ces instructions conditionnelles sont tout à fait valides, puisqu'il ne s'agit en réalité que de simples commentaires inoffensifs ;)


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

TypeSyntaxeValidité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 commentaires de type downlevel-revealed ne doivent pas être utilisés, de par leur non-validité !
Retour en haut

Expressions et opérateurs

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 versions (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érentes 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
<!--[if IE 6]>
<h1>Titre de la page</h1>
<![endif]-->
<!--[if IE 5.5]>
<h2>Sous-titre de la page</h2>
<![endif]-->


Les opérateurs



ItemExempleDiscription
! [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
<!--[if gte IE 5]>
<h1>Titre de la page</h1>
<![endif]-->


Nous pouvons traduire la condition comme suit : si la version d'IE est supérieure ou égale à la version 5.0, alors on affiche.


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
<!--[if gt IE 5.5]>
<h1>Titre de la page</h1>
<![endif]-->


Ce script ne sera pris en compte que par les versions supérieures à la version 5.5. Donc, ce script ne sera pas appliqué pour IE 5 et IE 5.5.
Retour en haut

Cacher le contenu à IE

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

Citation : Exemple
<!--[if !IE]><!-->
<h2>Titre de la page</h2>
<!--><![endif]-->


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 :D ), 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
<!--[if IE]>
<link href="style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if !IE]><!-->
<link href="style_ff.css" rel="stylesheet" type="text/css" />
<!--><![endif]-->


Voilà qui clôture la partie dédiée aux instructions conditionnelles.

PS : dans la plupart des tutoriels, on montre toujours l'intérêt d'afficher une feuille de style, et beaucoup de gens croient que ça n'a que cette utilité. Moi, je vous ai d'abord montré qu'on pouvait afficher une balise (ici, H1). Cela peut être utile dans certains cas, d'afficher au non une balise suivant le navigateur.
Retour en haut

En plus...

Liens





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 :) ))) :

Image utilisateur Image utilisateur


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

Partager

Retour en haut
8 commentaires pour "Les instructions conditionnelles"
Note moyenne : 3.56 / 4 (25 votes)
Pseudo Commentaire
Hors ligne dagnic # Posté le 04/07/2009 à 17:30:09
Avatar

Ville : Crépy-en-valois
Pays : France métropolitaine

 Oui moi aussi j'ai ce problème.
Que faire?
Titulaire du Diplôme d'Université <Astronomie et Mécanique Céleste> de l'Observatoire de Paris (L1)

"Tout ce que peut espérer la philosophie, c'est de rendre la poésie et la science complémentaires, de les unir comme deux contraires bien faits"
Gaston Bachelard, La Psychanalyse du Feu
 
Hors ligne Tidus2 # Posté le 25/08/2009 à 14:54:06
Avatar
close

Bon tuto, très utile. ^^
Seul truc à rajouter au niveau du "script parfait", c'est que maintenant, avec IE 8, on a parfois besoin de faire des trucs seulement pour IE 6. Voilà donc ma version du code parfait :
Code : HTML
1
2
3
4
5
6
7
8
9
<!--[if IE 6]>
   [modification à cause d'IE 6]
<![endif]-->
<!--[if !IE 6]>
   [code pour IE mais différent de la version 6]
<![endif]-->
<!--[if !IE]><-->
   [code pour tous les autres navigateurs que IE]
<!--><![endif]-->


Ca fait un petit bug de coloration sur Notepad++ comme ici, mais tout est bien pris en compte. :)
C'est un peu lourd comme code (surtout que des fois le code pour "!IE 6" et "!IE" est identique, notamment dans la gestion des PNG transparents qu'on doit remplacer par des GIF), mais je ne vois que ça.
Ma chaîne Youtube ! En ce moment, traductions de Sanity Not Included, sketches à base de Machinimas. Si vous aimez les jeux vidéos et qu vous avez un peu d'humour, essayez !
Image utilisateur Venez jouer avec moi : disponible pour Portal 2, Team Fortress 2, Left 4 Dead 1 & 2, et bien d'autres.
 
Hors ligne fdpLAsMa # Posté le 05/12/2009 à 19:27:44

Bonsoir, j'ai fait comme indiquer dans le tuto pour faire appel à une feuille de style spécifique à ie :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="google-site-verification" content="DKXGOKOVcQys-I_Sb-4784Vd2goIFVlyO_I4-jQwv7Y" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Etudiant SRC - Raphaël Gand - IUT de Troyes</title>
<link href="style.css" rel="stylesheet" type="text/css" />

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


Mais pourtant rien y fait, ie ne prend pas en compte le script et se base toujours sur style.css

I M C O M P R E H E N S I B L E !

Vous n'auriez pas une idée ? ^^ Merci
Hors ligne francisdem # Posté le 03/02/2011 à 15:03:54

GENIAL et je pèse mes mots.
J'ai fait plusieurs sites internet grâce a vous et vos explications et tuto sont vraiment ce qui se fait de mieux dans le genre.

Bravos et merci.
Francis
Hors ligne 0+0 # Posté le 05/01/2012 à 19:50:45
Avatar

 Salut et merci pour "l'update" (nécessaire) de l'excellent tuto de matéo :)

j'aimerai beaucoup savoir si il y a moyen dans la condition "si différent de IE9" renvoyer au visiteur un permalien sur IE9 pour update sans douleur à la façon d'Adobe Flash Player par exemple?

Merci :)

Voir tous les commentaires