CSS Hacks pour IE et commentaires conditionnels

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

Partager

Commentaires (0)


Ajouter un commentaire





Tags autorisés : <b><i><br>Ajouter un nouveau commentaire :