Une astuce qui commence à dater un peu mais qui est toujours d’actualité, notamment pour les applications d’entreprises qui fonctionnent encore sur des vieilles versions d’Internet Explorer :) Internet Explorer a toujours été un calvaire pour les développeurs web. Entre les problèmes de compatibilité, les comportements spécifiques, ses « bizarreries » et ses « curiosités »… Pour les styles, il existe pourtant quelques astuces très pratiques permettant de gagner du temps et d’économiser ses nerfs.

1. Les commentaires conditionnels

Probablement la méthode la plus connue et la plus utilisée. Elle consiste à placer ses styles (directement ou via un fichier .css) dans un bloc avec condition, la condition permettant d’indiquer la version d’Internet Explorer.

\* Cible une version spécifique */
<!--[if IE 8]>

\* Cible toutes les versions inférieures à celle spécifiée */
<!--[if lt IE 8]>

\* Cible toutes les versions supérieures ou égales à celle spécifiée */
<!--[if gte IE 8]>

2. Les règles spécifiques (IE CSS hacks) - “ma préférée”

Moins connue, mais pourtant beaucoup plus pratique, ces règles s’utilisent directement dans la feuille de style principale (ce qui évite d’éparpiller les styles).

.myClass {
     background: pink; \* standard */
     background: yellow\9; \* uniquement pour IE 8 et plus */
     *background: blue; \* uniquement pour IE 7 et plus */
     _background: green; \* uniquement pour IE 6 */
}

Ces règles sont interprétables uniquement par IE, et ne viennent donc pas « polluer » les autres navigateurs. Attention par contre, elles ne sont pas reconnues comme syntaxe CSS valide.

3. Les classes conditionnelles

La dernière astuce consiste à jouer avec la classe CSS globale au document. Il suffit de définir une classe par version d’Internet Explorer directement sur la balise (via les commentaires conditionnels).

<!--[if lt IE 7]> 
     <html class="ie6">
<![endif]-->

<!--[if IE 8]> 
     <html class="ie8">
<![endif]-->

<!--[if (gt IE 9)|!(IE)]> 
     <html> 
<![endif]-->

Ensuite, pour faire un style dédié à une version d’IE, il suffit d’ajouter la classe de la version voulue à côté de notre propre classe.

.ie6 .myClass {
     \* Style spécifique pour IE6 */
}