Analyse et solutions aux restrictions d'IE sur les feuilles de style CSS_Échange d'expérience

Il existe quatre manières courantes d'associer des documents HTML à CSS :

Utiliser des balises de lien


Utiliser des éléments de style

body{background:#fff;}
h1{font-size:2em;}

Utilisez la commande @import

@import url(sheet1.css);
@import "sheet2.css"

Style en ligne utilisant l'attribut style (style en ligne) Ce sont des mots rouges
Dans les applications réelles, l'utilisation de styles en ligne utilisant l'attribut style n'est pas recommandée. XHTML1.1 a standardisé son utilisation car elle n'est pas recommandée. La raison est simple. Cette méthode n'est pas bien meilleure que la balise font et affaiblit la balise centralisée. contrôle du CSS. Avantages de l’apparence globale du document. Les trois premières méthodes utilisent des balises de lien et des balises de style, et ont les restrictions suivantes dans IE (y compris IE6, IE7 et IE8 beta1) :

Seul le CSS associé aux 31 premières balises de lien ou de style du document peut être appliqué.

A partir du 32ème, le CSS associé à son tag sera invalide. La documentation officielle d'IE Toutes les balises de style après les 30 premières balises de style sur une page HTML ne sont pas appliquées dans Internet Explorer mentionne également cette restriction, y compris l'utilisation de fichiers .xsl .xml ont également cette restriction. Mais il semble que la mauvaise quantité ait été écrite. Veuillez regarder IE :

Exemple 1 : 34 balises de style sont appliquées en même temps
Exemple 2 : 1 balise de style et 34 balises de lien sont appliquées en même temps
Une balise de style n'a qu'une les 31 premières instructions @import Application efficace.

Ignorer à partir de la 32ème directive @import. Veuillez consulter :

Exemple 3 : Utilisez la directive @import 34 fois dans une balise de style.

Seules les 31 premières directives @import d'un fichier css sont effectivement appliquées.

Ignorer à partir de la 31ème directive @import. Veuillez consulter :

Exemple 4 : utilisez la balise de lien pour introduire un fichier CSS qui utilise la directive @import 34 fois
Exemple 5 : utilisez la balise de style pour introduire un fichier CSS qui utilise la directive @import 34 fois
Exemple 6 : Utiliser des balises de lien et de style pour introduire un fichier CSS qui utilise la directive @import plus de 31 fois
Un fichier CSS ne peut pas dépasser 288 Ko ?

Cette nouvelle provient de la limite de taille de fichier CSS d'Internet Explorer.

La limite en cascade sous la commande @import ne peut pas dépasser 4 couches

Lors de l'introduction de fichiers CSS via la commande @import sous IE, la cinquième couche sera invalide. Cette limite provient de la limite Cascade via la règle @import. En effet, en raison de la prise en charge imparfaite des navigateurs pour l'imbrication multi-niveaux, même si vous devez utiliser la directive @import pour introduire les fichiers CSS, ne dépassez pas 2 niveaux.

Les restrictions d'IE sur CSS ne seront pas rencontrées dans la plupart des cas. Même si vous rencontrez la meilleure solution, vous devez fusionner les fichiers CSS et les balises de réponse manuellement ou via un programme back-end, en minimisant le nombre de http. requêtes est le premier principe d’optimisation du rendu des pages.

Dans IE, la valeur des styles en ligne et intégrés peut être modifiée via l'objet document.styleSheets (pris en charge par Firefox, Opera9 et Safari3.1). Cet objet n'est disponible que lorsque le document contient des éléments de style ou de lien. En fait, en utilisant document.styleSheets.length, vous pouvez voir que la valeur maximale sous IE est de 31.Ce qui suit utilise Javascript pour fusionner les balises de lien et de style afin de résoudre les limitations sous IE :

var fnMergeStyleSheet = function(){
if(!document.styleSheets){
return
}
var aSheet = document.styleSheets,
aStyle = document.getElementsByTagName('style'),
aLink = document.getElementsByTagName('link');
if(aStyle.length + aLink. longueur                                                                                                                                                                                         🎜> // Enregistrez le style dans la balise de style, puis supprimez la balise, mais conservez la premier
//Parce que la valeur renvoyée par le La méthode getElementsByTagName est nodeList, donc lors de la suppression, bouclez dans l'ordre inverse
for(var i=aStyle.length-1;i>-1;–i){
var o = aStyle[i]
aCssText.push(o.innerHTML);
if(i>0){
                  o.parentNode.removeChild(o); Être copié dans un tableau aCloneLink
for(var i=aLink.length-1); ;i>-1;–i){
var o = aLink[i];
if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){
                                                                                         
aCloneLink.push(o.cloneNode(true));                                                                             
var oHead = document.getElements ByTagName('head')[0];
//Grâce à la suppression précédente, seulement 2 des 31 premiers liens ou les balises de style sont laissées au maximum
//En rajoutant le lien La méthode du nœud active son attribut styleSheet pour obtenir le style
for(var i = aCloneLink.length-1;i>-1;–i) {
var o = aCloneLink[i];
oHead.appendChild(o);
aCssText.push(o.styleSheet.cssText);
oHead.removeChild(o); 0].cssText += aCssText.join(”);
}
Ce qui précède n'est qu'une solution simple et approximative. Veuillez consulter l'exemple 1 et l'exemple 2 pour une démonstration. Il y a encore des domaines qui peuvent être améliorés :

L'attribut media n'est pas pris en compte. S'il y a plusieurs médias, ils doivent être fusionnés séparément. Bien entendu, l'impact de rel="alternate stylesheet" dans la balise de lien n'est pas pris en compte. Mais je recommande d'écrire les styles correspondants dans le même fichier via la directive @media, ce qui peut au moins réduire le nombre de connexions HTTP.
Cela ne résout pas le problème de la limite de 31 fois de la commande @import. En fait, vous pouvez extraire sa valeur href puis l'activer. Cependant, dans les applications pratiques, il est recommandé d'utiliser la balise link pour remplacer la directive @import. En effet, la directive @import dans IE équivaut à écrire la balise link au bas du document, ce qui provoquera un style instantané. problème lorsque la page IE5/6 est chargée. Le nom scientifique est " "Flash of Unstyled Content" (appelé FOUC), bien sûr, ce bug peut être évité en plaçant un lien ou un élément de script dans l'en-tête du document.
De manière générale, s'il y a un grand nombre de balises de lien ou de style sur la page, beaucoup d'entre elles sont susceptibles d'être identiques. Vous pouvez supprimer les mêmes éléments avant de fusionner aCssText pour réduire la quantité de code.
Si vous n'utilisez pas l'élément de style existant dans le DOM pour ajouter directement le code de style via l'attribut cssText, mais créez un nouvel élément de style à ajouter, assurez-vous d'abord d'ajouter le nouvel élément de style au DOM, puis utilisez le code de style d'ajout des attributs cssText. Au contraire, le code de style qu'il ajoute semble être analysé par l'analyseur de style d'IE6 avant d'être ajouté, donc !imporant et le hack seront invalides. Veuillez consulter l'exemple 7. Il n'est pas recommandé d'ajouter de nouveaux styles en ajoutant de nouveaux éléments de style, car cela peut facilement atteindre les limites d'IE.