Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)

Toujours dans ma recherche de solution pour servir des déclarations CSS uniquement à Internet Explorer, je suis tombé sur une technique que j’appellerais «classification» sélective du `body` (ou de la balise `html`) en  fonction du navigateur. Une fois encore, les commentaires conditionnels serviront à détecter Internet Explorer pour ajouter une classe à la balise `html` pour éviter de créer une feuille de style dédiée à IE.

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

Reste à utiliser ce sélecteur `.ie` dans votre feuille de style pour cibler IE toute version confondue. Rien n’empêche d’utiliser plusieurs commentaires pour cibler différentes versions, comme le suggère Yves Van Goethem (dont le code source de la page personnelle — http://yves.vg — a fourni la matière première de ce billet).

Cibler chaque version d’Internet Explorer

<!--[if !IE]><!--><html><!-- <![endif]-->
<!--[if lte IE 6]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if gte IE 8]><html class="ie8"><![endif]-->

Internet Explorer ne tiendra pas compte de la première ligne. Ensuite, on fait un premier tri pour mettre de côté les versions inférieures ou égales à IE6.  Plus loin, on isole IE7, et pour finir on cible les versions supérieures ou égales à IE8.

Et le prochain IE9 ?

Si IE9 utilise les commentaires conditionnels de la même manière, il sera toujours temps de modifier la dernière ligne et d’en ajouter une :

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

Exemple d’utilisation

Dans la feuille de style, on pourra utiliser (au hasard) :

#sidebar { width: 200px; }
.ie6 #sidebar { margin-left: -3px; }

Mise à jour (17/02/2011)

Voici les commentaires conditionnels utilisé par le framework HTML5 Boilerplate :

<!doctype html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="fr" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="fr" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="fr" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="fr" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->