 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Utiliser les commentaires conditionnels pour mieux cibler IE |
| |
| Les hacks tombant en désuétude, les commentaires conditionnels deviennent la solution recommandée pour définir qu'une règle s'applique ou non au navigateur de Microsoft.
(09/02/2007) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Depuis 2001 et la sortie d'Internet Explorer 6, les développeurs ont dû mettre au point un grand nombre de contournements CSS (ou hacks) pour faire en sorte qu'une règle ne s'applique qu'à ce navigateur - ou à tous sauf à lui. Cinq ans plus tard, Internet Explorer 7 a rendu obsolète ou dangereux la plupart de ces contournements. Les développeurs Web consciencieux se tournent donc vers une technologie disponible depuis Internet Explorer 5.0 : les commentaires conditionnels.
Les commentaires conditionnels sont des instructions à placer dans des commentaires HTML classiques, celles-ci étant reconnues uniquement par IE. Leur usage est simple : grâce à une instruction if et endif dans deux commentaires consécutifs, il est possible de désigner à partir de quelle version de IE le contenu situé entre les deux commentaires devra être pris en compte par le moteur de rendu. Les versions que l'on peut viser sont, pour l'heure, les suivantes : 5, 5.0, 5.5, 6, 7. Gageons que IE8 sera également pris en compte.
La syntaxe est comme suit :
<!--[if IE 7]>
<p>Ce contenu ne sera affiché que par IE7.</p>
<![endif]-->
<!--[if IE 5]>
<p>Ce contenu ne sera affiché que par IE 5.0 et IE 5.5.</p>
<![endif]-->
<!--[if IE 5.0]>
<p>Ce contenu ne sera affiché que par IE 5.0.</p>
<![endif]-->
Il est possible d'apporter des conditions :
<!--[if !IE]>
<p>Ce contenu ne sera affiché par aucune version de IE.</p>
<![endif]-->
<!--[if !IE 5]>
<p>Ce contenu ne sera pas affiché par IE 5.</p>
<![endif]-->
<!--[if gte IE 6]>
<p>Ce contenu ne sera affiché que par les version de IE supérieure ou égale à la 6 (gte = Greater Than or Equal).</p>
<![endif]-->
<!--[if lt IE 7]>
<p>Ce contenu ne sera affiché par les versions inférieures à IE 7 (lt = Lower Than).</p>
<![endif]-->
Ce sont des commentaires HTML, donc ils ne sont pas utilisables dans une feuille CSS, comme on le ferait pour des hacks. Ils servent à cacher ou non leur bloc conteneur aux yeux de l'analyseur HTML, et donc peuvent servir pour ajouter des éléments <style>, <script> ou même <link> à une page quand elle s'affiche dans IE.
<link rel="stylesheet" type="text/css" href="/developpeur/css/all.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/developpeur/css/ie7.css" />
<![endif]-->
Les règles de la feuille spécifique viendront alors remplacer celles de la feuille générale.
|
|
|
|
|
|
|
