Je viens de faire un triste constat en atteignant les limites de Internet Explorer. Eh oui, j'ai confirmé ce matin que Internet explorer ne supporte que 4 niveaux d'héritage de CSS selon la règle des @import.
Alors voilà, j'ai une série de CSS qui s'appellent l'une et l'autre et les déclarations de style s'écrasent selon leur niveau (grosso modo, plus la CSS est «près» du document qui l'appelle, plus elle a de poids. Voir à cet effet les propriétés de cascade des CSS).
Or, quand j'atteint un certain niveau, Internet explorer ne lit plus les CSS. Voici le test que j'ai fait:
- http://dtia143:9001/heritage/
- Appel de la CSS niveau 1 via la balise link
- http://dtia143:9004/css/heritage/niveau1.css
- @import url(/css/heritage/niveau2.css);
- http://dtia143:9004/css/heritage/niveau2.css
- @import url(/css/heritage/niveau3.css);
- http://dtia143:9004/css/heritage/niveau3.css
- @import url(/css/heritage/niveau4.css);
- http://dtia143:9004/css/heritage/niveau4.css
- @import url(/css/heritage/niveau5.css);
- http://dtia143:9004/css/heritage/niveau5.css
- body {background-color:red;}
J'ai fait le test de façon progressive, soit en ajoutant un niveau à la fois jusqu'à ce que IE n'affiche plus la couleur d'arrière plan dans ma page. Eh bien rendu au niveau 5, plus rien, le fond est devenu blanc, la couleur par défaut.
J'ai refait le test mais en mettant le style en ligne, soit la balise style dans le header et la règle @import pour importer la CSS niveau 1.
- http://dtia143:9001/heritage/
- Inline Styles from http://dtia143:9001/heritage/
- @import url(http://dtia143:9004/css/heritage/niveau1.css);
- http://dtia143:9004/css/heritage/niveau1.css
- @import url(/css/heritage/niveau2.css);
- http://dtia143:9004/css/heritage/niveau2.css
- @import url(/css/heritage/niveau3.css);
- http://dtia143:9004/css/heritage/niveau3.css
- @import url(/css/heritage/niveau4.css);
- http://dtia143:9004/css/heritage/niveau4.css
- body {background-color:red;}
Cette fois, c'est pire, je n'ai droit qu'à 4 niveaux, étant donné que la première balise d'importation compte dans le calcul fait par IE.
Je n'ai testé ce bug que dans IE 6, je n'ai pas d'autres versions sous la main. Firefox ne cause pas ce problème (ou je n'ai pas encore atteint sa limite). Je n'avais jamais entendu parler du problème avant hier, se pourrait-il que ça ne soit pas documenté? si ça l'est, j'aimerais bien avoir des sources... si quelqu'un en a sous la main.
Certains m'ont demandé pourquoi j'avais besoin d'autant d'héritage. Là n'est pas la question, car ce que j'en fais n'est pas l'important, c'est plutôt l'incapacité d'Internet Explorer à supporter un niveau décent de cet héritage.
Petit ajout: Il semblerait que le bogue ne soit pas reproductible pour certains... là, j'en perds mon latin! Peut-être est-ce dû à une version spécifique de IE? ou qu'une patch corrigerait (ou causerait) le problème?
Encore un ajout: J'ai beau tester et retester avec différents postes, j'arrive toujours au même constat. J'ai même sorti la page de mon OC4J, histoire de tester si c'était dû au serveur Web, sans changement... Donc, il s'agit soit d'un bug local dans mon bureau, soit d'un bug dans IE... Histoire que vous puissiez tester, j'ai mis une page en ligne sur un serveur Web...
Encore et toujours une mise à jour: Il y a du nouveau... il semblerait que ce soit un véritable problème de IE... pour la suite, suivez la discussion dans le forum!
Écrit par Thierry Goulet 10:01
1 Commentaire(s)
Intéressant. Au point où j'en fait mon billet du jour (http://normand.no-ip.org/tb.php?id=31). Merci de nous partager cette découverte.
Normand Lamoureux
Par , à 11:21 AM
