Une classe conditionnelle pour IE 6 et 7 Pour chaque navigateur ciblé, sa méthode
Voici une analyse de ce code, sélecteur par sélecteur :
1. Le sélecteur de base utilisé dans cet exemple est #test {}. Il correspond à un élément du contenu de la page, quel qu'il soit (un conteneur, un paragraphe, un lien...). La plupart du temps, on va définir les styles pour #test sans se soucier d'Internet Explorer 6 et 7.
2. Si jamais on rencontre un bug dans l'une ou l'autre version d'Internet Explorer, et que modifier légèrement les styles CSS appliqués à tous les navigateurs ne suffit pas, on peut avoir besoin d'appliquer un correctif CSS d'une ou deux lignes (rarement plus), spécifique à IE6-7, pour cet élément. On va pouvoir utiliser le sélecteur .ISIE67 #test {}.
Pour cibler IE6 uniquement, on va utiliser un hack CSS
3. Si le problème est spécifique à Internet Explorer 7 (c'est assez rare), on a un moyen simple de cibler uniquement cette version. On continue à utiliser la classe "ISIE67" pour restreindre le champ d'action à ces deux navigateurs, et on la combine avec le sélecteur d'enfant (symbole >) qu'IE6 ne comprend pas. On écrit donc body > .ISIE67 #test {} (car l'élément qui porte la classe "ISIE67" est un enfant de body), et le sélecteur sera compris par IE7 et ignoré par IE6.
4. Enfin, pour cibler IE6 uniquement, on va utiliser un hack CSS. Il s'agit du Star HTML Hack, qui consiste à placer un sélecteur d'élément universel (symbole *) avant un sélecteur d'élément qui vise l'élément html. Le sélecteur obtenu ne devrait trouver aucun élément dans la page, car l'élément html est la racine du document, il n'y a pas d'autre élément en amont ! Ce sélecteur est malgré tout compris par Internet Explorer 6, tandis qu'IE7 corrige ce bug. On l'utilise donc ici pour distinguer IE6 et IE7, tout en conservant notre classe "ISIE67" pour filtrer les autres navigateurs, pour plus de sécurité. On obtient donc: * html .ISIE67 #test {}.
Pour finir, sachez que cette technique est inspirée d'une technique présentée par Pierre Bertet. Cette dernière est plus complète, et sensiblement plus complexe côté HTML. En revanche, la syntaxe des sélecteurs CSS est un peu plus simple quand il s'agit de viser spécifiquement IE6 ou IE7 (surtout si vous n'êtes pas un habitué du sélecteur d'enfant et du Star HTML Hack). À vous de voir quelle variante vous préférez.