Bug d’interprétation du mot-clé !important dans IE 6

Màj: 7 février 2009

Il est notoriété publique qu’Internet Explorer 5 et 6 ne supportent pas le mot-clef !important. Ce problème a d’ailleurs inspiré un hack CSS pour Internet Explorer 5-6, qui peut se présenter ainsi:

p {
    background: navy !important; /* Appliqué par tous les navigateurs récents */
    background: black; /* Valeur appliquée par IE6 uniquement */
}

Ce hack, qui détourne une fonctionnalité du langage pour viser un navigateur en particulier, est comme la plupart des hacks CSS fortement déconseillé. Pour viser une version particulière d’Internet Explorer, on utilisera de préférence les commentaires conditionnels.

Cependant, il est faux de dire qu’Internet Explorer 5-6 ne comprend pas !important. Il le comprend la plupart du temps, mais un bug d’IE 5-6 dans un cas de figure précis fait que ce mot-clé n’est pas pris en compte.

Voir ci-dessous une série de tests qui illustrent ce problème, et la conclusion plus bas.

Tests

Dans tous les cas de figure, les fonds des titres des blocs de test sont censés apparaitre en vert clair (lime).

Si le mot-clé !important n’est pas supporté, ils doivent alors apparaitre en bleu foncé (navy). Enfin, si rien ne va plus, ils pourraient apparaitre en noir (black).

Test 1

#test1 {
    background: lime !important;
    background: black;
    background: navy;
}

Test 2

#test2 {
    background: black;
    background: lime !important;
    background: navy;
}

Test 3

#test3 {
    background: black !important;
    background: lime !important;
    background: navy;
}

Test 4

#test4 {background: lime !important;}
#test4 {background: black;}
#test4 {background: navy;}

Test 5

#test5 {background: black !important;}
#test5 {background: lime !important;}
#test5 {background: navy;}

Test 6

#test6 {background: lime !important; background: black;}
#test6 {background: navy;}

Test 7

#test7 {background: black !important; background: lime !important;}
#test7 {background: navy;}

Test 8

#test8 {background: black !important;}
#test8 {background: lime !important; background: navy;}

Conclusion

J’analyse les résultats de ces tests de la manière suivante:

  1. Tous les navigateurs modernes (post-IE6) implémentent correctement le mot-clé !important.
  2. Dans IE 5 et 6, en temps normal, le mot-clé !important est appliqué correctement.
  3. Dans IE 5 et 6, lorsque une propriété donnée est utilisée plusieurs fois au sein d’un même bloc de déclarations, dont au moins une fois sans le !important, ce mot-clé est ignoré pour cette propriété dans ce bloc de déclaration. Il n’est pas ignoré pour d’autres propriétés ou dans d’autres blocs de déclaration.

Le troisième point est un peu compliqué à saisir, mais il correspond bien, je pense, à la complexité de la situation. Le hack CSS bien connu qui exploite !important correspond en réalité à un cas très particulier d’utilisation du mot-clé.