Une classe conditionnelle pour IE 6 et 7 Une classe CSS conditionnelle

Comment se passer de feuilles de styles supplémentaires

La méthode que je vous propose permet de se passer de feuilles de styles supplémentaires. La première étape se passe également dans la structure HTML de vos pages. Cette fois, on ne s'intéresse pas à l'élément head mais à l'élément body :

 <body> 
<!--[if lte IE 7]><div class="ISIE67"><![endif]--> 
... 
<!--[if lte IE 7]></div><![endif]--> 
</body>

On encadre tout le contenu de body par deux commentaires conditionnels, qui visent tous les deux IE7 et IE6 (et aussi les versions inférieures, mais ces dernières ont pour ainsi dire disparu de la circulation).

En clair, le code HTML compris par Internet Explorer 6 ou 7 ressemble à ceci :

 <body> 
<div class="ISIE67"> 
... 
</div> 
</body>

Tandis que IE8, IE9, Firefox, Chrome, Safari, Opera et tous les autres comprennent ceci :

 <body> 
... 
</body>

Cela veut dire que la classe "ISIE67" (nom choisi arbitrairement, changez-le si vous le souhaitez) peut être utilisée pour différencier Internet Explorer 6 et 7 des autres navigateurs. Voici comment ça se passe côté CSS:

 #test { 
 /* Styles pour tous navigateurs */ 
} 
.ISIE67 #test { 
 /* Styles pour IE 6 et 7 */ 
} 
body > .ISIE67 #test { 
 /* Styles pour IE 7 */ 
} 
* html .ISIE67 #test { 
 /* Styles pour IE 6 */ 
}

Précédent
Suivant