CSS Hacks pour IE et commentaires conditionnels

Publié le par  | Dernières modifications le

Tags: css, hack, ie

Tout d'abord, il faut savoir que nous pouvons utiliser les commentaires conditionnels pour cibler une ou des versions d'IE et inclure dans une page Web : une feuille de styles, un fichier javascript, ou n'importe quel code HTML. Voici comment :

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

Mais parfois, nous voulons juste corriger un style qui s'affiche mal dans une version spécifique d'IE et nous ne voulons pas commencer à gérer plusieurs feuilles de styles pour toutes les situations possibles.

Les hacks

Les hacks CSS sont la solution facile à ce problème. Voici une liste de hacks CSS pour cibler les différentes versions d'IE :

IE 6 seulement

* html #div {
    height: 300px;
}
#div {
    _height: 300px;
}

IE 7 seulement

*+html #div {
    height: 300px;
}
*:first-child+html #div { color: red; }

IE 8 seulement

#div {
  height: 300px\0/; /* doit être le dernier style */
}

IE 6 & IE 7

#div {
    *height: 300px;
}

IE 6, IE 7, IE 8 & IE 9

#div {
  height: 300px\9;
}

Voir une démonstration des hacks précédents

Voir une démonstration très complète

Les commentaires conditionnels de façon intelligente

Voici une préparation passe-partout pour cibler IE sans hack

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

Et l'utilisation dans la feuille de styles :

.foo { color: black; } /* Tous les navigateurs */
.lt-ie9 .foo { color: green; } /* IE8 et - */
.lt-ie8 .foo { color: blue; } /* IE7 et - */
.lt-ie7 .foo { color: red; } /* IE6 et - */

De cette façon, on a une seule la feuille de styles qui est valide et ça marche partout! Il faut juste partir son site du bon pied.

Source : How To Create an IE-Only Stylesheet

Source : Conditional stylesheets vs CSS hacks? Answer: Neither!

Source : Browser CSS hacks

Autre article intéressant si vous développez pour IE 6 : IE CSS Bugs That’ll Get You Every Time