Tout intégrateur se retrouve un jour ou l’autre confronté aux hack CSS ! Que ce soit Internet Explorer qui fasse des siennes (sous ses différentes versions), ou un autre navigateur qui gère une propriété d’une façon particulière, c’est quelque chose de très pratique pour rendre son site compatible sous tous les navigateurs.
Nous commencerons tout d’abord par les commentaires conditionnels, pour affecter telle ou telle feuille CSS selon la version d’Internet Explorer, puis les hack plus particuliers au niveaux des sélecteurs et attributs.
Les commentaires conditionnels
Viser Internet Explorer toutes versions confondues
<!--[if IE]> Ici votre code HTML réservé à IE. <![endif]-->
Cibler une version particulière d’IE
<!--[if IE 5.0]> pour IE 5.0 <![endif]--> <!--[if IE 5.5000]> pour IE 5.5 <![endif]--> <!--[if IE 6]> pour IE 6.0 <![endif]--> <!--[if IE 7]> pour IE 7.0 <![endif]--> <!--[if IE 8]> pour IE 8.0 <![endif]--> <!--[if IE 9]> pour IE 9.0 <![endif]-->
Cibler plusieurs version d’IE
<!--[if comparateur IE version]>
Votre code sera lu selon votre condition
<![endif]-->
La variable « comparateur » peut prendre les valeurs suivantes:
- gte : plus grand ou égal
- gt : strictement plus grand
- lte : plus petit ou égal
- lt : strictement plus petit
Vous pouvez même utiliser les opérateurs de condition:
- | : ou
- & : et
- ! : not
Voici quelques exemples pour plus de compréhension:
<!--[if lte IE 9]> Version inférieure ou égale à 9<![endif]--> <!--[if gt IE 7]> Version supérieure à 7<![endif]--> <!--[if (lt IE 6)|(IE 8)]> Version inférieure à 6 ou égale à 8 <![endif]--> <!--[if (gt IE 5)&(!IE 7)]> Version supérieure à 5 et non égale à 7 <![endif]--> <!--[if !IE]><!--> Navigateurs autres qu'IE <!--<![endif]-->
Voilà vous savez désormais affecter une feuille de style particulière selon les différentes version du navigateur de Microsoft. Le mieux est de connaitre le peu de syntaxe à apprendre, et le fonctionnement de ces commentaires. Pour info, voilà comment inclure votre feuille de style dans le commentaire :
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="ie.css" />
<![endif]-->
Les hacks CSS
Hacks sur les sélecteurs
Attention, ces hacks sont à utiliser avec modération ! Pour ma part, je préfère utiliser les commentaires conditionnels.
* html identifiant{} // IE 6 et inférieurs
* > identifiant{} // Tous sauf IE6
* + html identifiant{} // IE7 uniquement
*:first-child+html identifiant{} // IE7 uniquement
Hack sur les attributs
Si vous désirez opérer uniquement sur un attribut de votre feuille CSS, voici comment vous pouvez procéder:
.test { _color: blue } // IE6
.test { *color: blue /* or #color: blue */ } // IE6 ou IE7
.test { color: blue\9 } // IE6 ou IE7 ou IE8
Je ne les ai pas tous mis, si vous avez d’autres hacks dont vous vous servez couramment, n’hésitez pas à les donner par commentaire pour que la liste soit plus exhaustive 😉
Si vous désirez une liste complète, vous pouvez suivre ce lien
Le mot de la fin
J’espère que cet aide mémoire vous sera utile, et je le redis et je me répète, si vous avez d’autres hacks que vous estimez utiles, commentez cet article pour étoffer la liste 🙂 Je ne sais pas comment vous fonctionnez au niveau de l’utilisation de ces commentaires conditionnels ou hacks CSS. Personnellement, j’inclus un style CSS pour tous les navigateurs, et ensuite je cible les différentes version d’IE via commentaires conditionnels pour effectuer une surcharge CSS.
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <link media="all" type="text/css" rel="stylesheet" href="css/iefix.css"> <![endif]--> <!--[if IE 7]> <link media="all" type="text/css" rel="stylesheet" href="css/iefix7.css"> <![endif]--> <!--[if IE 6]> <link media="all" type="text/css" rel="stylesheet" href="css/iefix6.css"> <![endif]-->
Bien sûr, je ne dis pas que ma méthode est la meilleure, et je suis curieux de connaître la votre, et d’échanger sur vos habitudes d’intégration! Le débat est ouvert 😉