Sélecteurs css pour ie et javascript en remplacement des hack

**cahnory** · 25/04/2010, 13h31

Bonjour à tous !
Je vous présente une technique html permettant, coté css de cibler les différentes version d'Internet Explorer ainsi que les navigateurs ayant javascript activé ou non.
L'idée de départ (source dans le lien) permettait d'obtenir une classe .ISIE67 en ajoutant des commentaires conditionnels autour de la balise body.
Parti de là, j'ai poussé un peu l'idée jusqu'à obtenir une palette de sélecteurs permettant de cibler les différentes versions d'Internet Explorer, les autres navigateurs (mais sans distinction entre eux) ainsi que la présence de javascript.

Les sélecteurs utilisables :
.ie5
.ie6
.ie7
.ie8
.nie (Navigateur autre qu'Internet Explorer)

mais aussi :
.lt-ie6
.lt-ie7
.lt-ie8

.lte-ie5
.lte-ie6
.lte-ie7
.lte-ie8

.gt-ie5
.gt-ie6
.gt-ie7

.gte-ie5
.gte-ie6
.gte-ie7
.gte-ie8

et pour le javascript :
#nojs
#js

Pourquoi un id pour le js et des classes pour le navigateur ?
Tout d'abord, des classes pour le navigateur car plusieurs classes sont déclarées à la fois (avec ie 5 par exemple : ie5, lte-ie5, lt-ie6, lte-ie6, lt-ie7, lte-ie7, lt-ie8, lte-ie8 et gte-ie5) et un élément html ne doit avoir qu'un seul identifiant (qui lui même ne peut être présent que sur un seul élément).
Concernant javascript l'utilisation de l'id est motivée par deux raisons simples. Si l'on ajoute une classe nojs/js à body (comme pour les navigateurs) on pourrait avoir besoin d'utiliser des sélecteurs du type .js.ie-6 hors certaines versions d'Internet Explorer ont du mal à interpréter ce genre de sélecteurs (plusieurs classes sur un même élément). En passant par un id nous n'avons plus ce problème, les sélecteurs du type #js.ie-6 étant bien pris en compte.
Dans le cas présent l'id est placé sur la balise html (ça n'apporte pas de gros changement si ce n'est que l'on peut de nouveau utiliser un id personnalisé pour body). La balise html ne peut avoir de class ce qui nous limite donc naturellement à l'utilisation d'un id.

Démonstration et sources
Vous pouvez avoir un aperçu de cette technique ainsi que les sources à cette adresse :
http://www.cahnory.fr/css/browser-check.html

Aller plus loin
Il est tout à fait possible d'aller encore plus en détail dans la détection d'ie, les seules limitations étant celles des commentaires conditionnels dont vous trouverez une description détaillées directement à la source :
http://msdn.microsoft.com/en-us/libr...12(VS.85).aspx

J'espère vous avoir intéressé.

**Celira** · 04/05/2010, 18h38

ça m'a l'air bien pratique tout ça ! à garder sous le coude

Te décourage pas, cahn, tu fais du bon boulot !

**drogbaaz** · 28/09/2011, 15h31

J'ai testé, ça fonctionne bien, sauf avec le "!IE", qui ignore Chrome...

**vermine** · 29/09/2011, 07h33

Que voulez-vous dire par "ignorer" ? Chrome est (était ?) en partie dépendant d'IE.

**drogbaaz** · 29/09/2011, 09h30

Ok mais lorsque je mets le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!--[if IE 5]><body class="ie ie5 lte-ie5 lt-ie6 lte-ie6 lt-ie7 lte-ie7 lt-ie8 lte-ie8 gte-ie5"><![endif]-->
<!--[if IE 6]><body class="ie ie6 lte-ie6 lt-ie7 lte-ie7 lt-ie8 lte-ie8 gt-ie5 gte-ie5 gte-ie6"><![endif]-->
<!--[if IE 7]><body class="ie ie7 lte-ie7 lt-ie8 lte-ie8 gt-ie5 gte-ie5 gt-ie6 gte-ie6 gte-ie7"><![endif]-->
<!--[if IE 8]><body class="ie ie8 lte-ie8 gt-ie5 gte-ie5 gt-ie6 gte-ie6 gt-ie7 gte-ie7 gte-ie8"><![endif]-->
<!--[if !IE]><!--><body class="nie"><!--<![endif]-->

Il n'est pris en compte par aucune partie. Comment faire ?!

Merci,

**vermine** · 29/09/2011, 09h41

Je ne comprends pas bien cette ligne-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!--[if !IE]><!--><body class="nie"><!--<![endif]-->

Sélecteurs css pour ie et javascript en remplacement des hack

Contribuez

Discussions similaires

Partager

Partager