Hack CSS vs commentaires conditionnels
Comme tout le monde le sait, il est difficilement gérable (voire impossible) d'avoir le même rendu sur tous les navigateurs
dès que l'on veut réaliser un design complexe.
Le problème venant surtout de la manière différente des navigateurs à interpréter les padding, margin, height et autres ...
Pour y remédier, il y a une solution plutôt simple, les Hack CSS. Les Hack sont ces instructions comprises par certains navigateurs et
pas par d'autres. Ils s'intègrent directement dans le fichier CSS, comme un bloc d'instructions et viennent donc ralonger le code
et nuire à sa lisibilité.
Avec l'arrivée d'IE7, je me
suis aperçu que mon site comprenait certains décalages sous IE7 avec certains div.
En effet, IE7 n'interprétait plus ma feuille de style css avec mes hack comme les précedentes versions.
Pour redonner à ma page son look original, j'ai trouvé deux solutions :
- utiliser de nouveaux hack spéciaux à IE7
- utiliser des commentaires conditionnels
Cette dernière solution est celle conseillée par le
blog IE Microsoft.
Elle permet en effet de ne plus utiliser des hack mais des feuilles de style css à part suivant la version du navigateur (uniquement pour Internet Explorer).
Les Hack CSS
Le Star Hack (*hack) :
Sûrement le plus utilisé car très simple à implanter, le Star Hack utilise un "bug" d'IE qui ne gère pas les parents/enfants en css.
Un exemple :
#header {
/*Ce code sera interprété par tous les navigateurs mais IE ne connait pas la propriété min-height mais utilise height */
min-height:20px;
}
* html #header{
/*Ce code sera interprété uniquement par IE et appliquera donc cette hauteur minimale, souvent utile pour afficher des backgrounds */
height:20px;
}
* html .header{
/* De même si vous utilisez des class au lieu des id */
}
Malheureusement, la version 7 d'Internet Explorer ne se prend plus dans la faille et n'applique pas les règles incluses dans un star hack.
C'est donc dans ce cas que l'on se rend compte de l'utilité des commentaires conditionnels.
Le Underscore Hack (_hack) :
#header {
/* Les autres navigateurs (Firefox, Opera, ...) interpréteront uniquement cette ligne */
position: fixed;
/* Seul Internet Explorer interprétera cette ligne */
_position: absolute;
...
}
Le *+html hack :
Une version modifiée du star hack qui est interprétée exclusivement par IE7
*+html #header_haut{
/* Cette portion de code est interprétée exclusivement par IE7 */
margin-top:-20px;
}
A l'usage, on se rend compte de la simplicité de ces hack mais aussi de leur non-fiabilité. Un nouveau navigateur qui n'interprète plus
votre code de la même manière et tout est à refaire. C'est pourquoi il est préferable d'utiliser les commentaires conditionnels présentés plus loin.
Les Commentaires Conditionnels
Les commentaires conditionnels sont propres à Internet Explorer (>v5.0) et ne seront donc pas interprétés par les autres navigateurs (FireFox, Safari, Opera).
Ils sont en plus conformes html 4.01 et xhtml 1.0.
Dans ces exemples, on va voir comment ils peuvent servir à désigner une version spécifique d'Internet Explorer ou un groupe de version avec des opérateurs spéciaux.
Ces lignes doivent bien sur être insérées entre les balises "head" de votre page puisqu'elle lie des feuilles de style spécifiques.
Désigner toutes les versions d'IE :
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css_special_ie.css" media="screen" />
<![endif]-->
Désigner une version spécifique d'IE :
<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="/css_special_ie5_0.css" media="screen" />
<![endif]-->
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="/css_special_ie5_5.css" media="screen" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css_special_ie6_0.css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css_special_ie7.css" media="screen" />
<![endif]-->
Désigner une version d'IE supérieur ou égale à :
<!--[if gte IE 5]>
/* on utilise ici l'opérateur gte : greater than or equal
spécifier ici les feuilles de style pour IE 5.0, IE5.5, IE6.0 et IE7.0 */
<![endif]-->
<!--[if gte IE 5.5000]>
/* spécifier ici les feuilles de style pour IE5.5, IE6.0 et IE7.0 */
<![endif]-->
Désigner une version d'IE inférieure ou égale à :
<!--[if lte IE 6]>
/* on utilise ici l'opérateur lte : lower than or equal
spécifier ici les feuilles de style pour IE5.0, IE5.5 et IE6.0 mais pas IE7.0 */
<![endif]-->
Les commentaires conditionnels représentent ainsi une manière fiable de manipuler les css mais ils ont aussi leurs limites.
En effet, il faut rajouter ces lignes de code sur toutes les pages, ce que est simple pour un site dynamique en plaçant un include mais peut être
long s'il on doit l'ajouter à des dixaines de pages html.
