Comment utiliser les hacks CSS ?
Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).
Cibler les versions <= à IE8
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/ie.css" type="text/css"
media="screen,projection" />
<![endif]-->
De cette manière, les règles CSS placées dans ie.css s’adressent uniquement à Internet Explorer ; les autres navigateurs considèrent ces commentaires conditionnels comme de simples commentaires HTML. Ça va sans dire mais encore mieux en le disant : les déclarations situées dans style.css s’appliquent aussi à Internet Explorer ce qui implique que l’appel à ie.css doit se situer après style.css pour surcharger les déclarations qui posent problème.
Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer :
Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant <!--[if !IE]> <!--> IE Windows ne lira pas ça <!--> <![endif]-->
#header { margin-top: 0; }
, il suffira d’y ajouter * html #header { margin-top: -5px; }
pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7
En revanche, si vous avez également besoin d’une valeur différente pour IE8, il faudra prendre soin d’ajouter la règle CSS #search .submit { margin-top: -7px; }
au-dessus des deux autres, soit :#search .submit { margin-top: -7px; } //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement
Mettez vos frameworks CSS à jour
Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la formehtml>body
qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html
qui n’est compris que par IE7.Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne
html>body p code { white-space: normal; }
par
+html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)24 hacks CSS à consommer avec modération
Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.Hacks sur les sélecteurs
IE6 et inférieurs
* html .test { color: red }
IE7
*:first-child+html .test { color: red }
IE7, Firefox, Safari, Opera
html>body .test { color: red }
IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)
html>/**/body .test { color: red }
Opera 9.27 et inférieurs, Safari 2
html:first-child .test { color: red }
Safari 2 — 3
html[xmlns*=""] body:last-child .test { color: red }
safari 3+, Chrome 1+, Opera9+, Firefox 3.5+
body:nth-of-type(1) .test { color: red }
Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+
body:first-of-type .test { color: red }
Safaris 3+, Chrome1+
@media screen and (-webkit-min-device-pixel-ratio:0) { .test { color: red } }
iPhone / Webkit mobile
@media screen and (max-device-width: 480px) { .test { color: red } }
Safari 2 — 3.1
html[xmlns*=""]:root .test { color: red }
Safari 2 — 3.1, Opera 9.25
*|html[xmlns*=""] .test { color: red }
Safari — Chrome
.test { [color: #000000; }
Tout sauf IE6 — 8
:root *> .test { color: red }
IE7
*+html .test { color: red }
Uniquement Firefox. 1+
.test, x:-moz-any-link { color: red }
Firefox 3.0+
.test, x:-moz-any-link, x:default { color: red }
Hacks sur les attributs
IE6
.test { _color: blue }
IE6, IE7
.test { *color: blue /* or #color: blue */ }
Tout sauf IE6
.test { color/**/: blue }
IE6, IE7, IE8
.test { color: blue\9 }
IE7, IE8
.test { color/*\**/: blue\9 }
IE6, IE7 — fonctionne comme !important
.test { color: blue !ie } /* la chaine après
!
peut être n'importe quoi */IE8
.test { color: #0000FF\0; }