Par George

Avatar de George

Les hacks IE

Comme j’évoquais hier les difficultés récurentes à développer pour tous les navigateurs, IE ne respectant pas les standards W3C, voici quelques solutions pour obtenir un affichage identique sous IE et n’importe quel navigateur moderne.

Ces astuces sont généralement connues sous le nom de “hacks IE”, et exploitent tout simplement les différences (pour ne pas dire défaillances) des navigateurs de Microsoft.

Le plus connu est le <!–[if IE]>. Il s’agit d’une instruction comprise exclusivement par IE. Les autres navigateurs l’interprètent comme des commentaires.

<!--[if IE]>
mettre ici ce que l'on veut,
comme l'insertion d'une css spécifique à IE
< ![endif]-->

Il est même possible de préciser quelle est, ou quelles sont, les versions d’IE est concernées. N’est-ce pas merveilleux ?

<!--[if IE]>
	si le navigateur est IE
<![endif]-->
<!--[if IE 5]>
	si le navigateur est IE 5 (il est bien sur possible de spécifier une autre version)
<![endif]-->
<!--[if IE 5.5]>
	si le navigateur est IE 5.5 (une sélection plus fine de la version)
<![endif]-->
<!--[if gt IE 5]>
	si le navigateur est supérieur à IE 5 (gt pour supérieur)
<![endif]-->
<!--[if gte IE 5]>
	si le navigateur est supérieur ou égal à IE 5 (gte pour supérieur ou égal)
<![endif]-->
<!--[if lt IE 6]>
	si le navigateur est inférieur à IE 6 (lt pour inférieur)
<![endif]-->
<!--[if lte IE 6]>
	si le navigateur est inférieur ou égal à IE 6 (lte pour inférieur ou égal)
<![endif]-->

Il y a également les Hacks CSS :

sélecteur {
  propriété : valeur !important;
}
/* Par exemple : */
body {
  background-color : green !important;
  background-color : red;
}

IE n’interprétant pas le “!important”, il écrase la première propriété avec la deuxième.
Dans l’exemple ci-dessus, Le background de la page sera donc vert pour tous les navigateurs, et rouge pour IE.
Attention à ne pas se tromper d’ordre si vous voulez que cela fonctionne !
Voici un autre équivalent :

body {
  background-color : green;
  _background-color : red;
}

L’underscore est compris par tous les navigateurs comme un commentaire. IE ne le comprend tout simplement pas et interprete donc quand même la seconde ligne, écrasant ainsi la première.
Voici encore une autre solution :

* html .mon_selecteur {
  background-color : red;
}

Le signe * signifie : n’importe quelle balise.
Donc, “* html” signifie : n’importe quelle balise avant la balise html. Bien sûr, il n’en existe pas. Le code ne risque donc pas d’être exécuté. Sauf par IE qui, encore une fois, ne comprend pas cette règle !
Dans l’exemple ci-dessus, seul IE affichera donc un fond rouge.

Je viens de vous donner ici les “trucs” les plus connus pour gérer correctement les différences intrinsèques à Internet Explorer.
Vous pouvez trouver à cette adresse une liste de hacks bien plus exhaustive.

De manière générale, je vous conseille toutefois d’éviter au maximum de recourir à ces astuces. Il est généralement possible de s’en passer en repensant correctement la structure de sa page. Et le code n’en est que plus lisible.

Poster un commentaire

Subscribe without commenting