Une classe conditionnelle pour IE 6 et 7 Utilisation classique des commentaires conditionnels

Une feuille de styles avec quelques lignes de correctifs CSS

On veut appliquer à chaque version d'Internet Explorer qui pose problème (mettons la 6 et la 7) une feuille de styles qui comportera quelques lignes de correctifs CSS. Quelques lignes seulement, car si on se retrouve à dupliquer la feuille de styles principale, on prend un mauvaise voie (non seulement c'est inutile, mais en plus ça posera des problèmes lors des modifications ultérieures des styles CSS).

On écrira donc dans l'élément head de chaque page du site :

<link rel="stylesheet" type="text/css" href="styles.css"/>
<!--[if IE 7]><link rel="stylesheet" type="text/css"
href="styles-ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css"
href="styles-ie6.css" /><![endif]--> 

Plusieurs inconvénients

Les inconvénients de cette méthode :

 IE6 doit charger deux fichiers au lieu d'un (styles.css et styles-ie6.css), de même pour IE7 (styles.css et styles-ie7.css). Ce n'est pas énorme mais ça fait une requête HTTP supplémentaire, ce qui a un petit impact sur la vitesse d'affichage des pages.

 Certains correctifs CSS s'appliquent à la fois à Internet Explorer 7 et à IE6. Il faudra les écrire une fois dans chaque fichier de correctifs.

 Le plus important : à chaque changement de styles.css, il faudra vérifier dans les deux feuilles de correctifs CSS s'il n'y a pas des changements à répercuter. La maintenance et l'évolution des styles CSS deviennent difficiles.