Limites des règles CSS d'Internet Explorer


150

J'ai lu des informations contradictoires concernant les limites CSS stupides d'Internet Explorer. Je suis (je crois comprendre) que vous ne pouvez avoir que 31 <style>et <link>balises (combinées), et que chaque feuille peut avoir jusqu'à 31 @import-s (donc 31 <link>-s, chacun à 31 @import-s est bien, bien que fou).

Cependant, la règle 4095 est moins claire - est-ce 4095 règles par document ou par feuille? Par exemple, puis-je <link>utiliser deux feuilles de style, chacune avec 4000 règles, et le faire fonctionner, ou cela va-t-il dépasser la limite?

Edition tierce 2018

Sur cet article de blog msdn stylesheet-limits-in-internet-explorer, des informations supplémentaires sont données.


1
Il semble que la limite de 4095 est par document selon habdas.org/2010/05/30/msie-4095-selector-limit et il y a aussi un lien vers une page de test que vous pouvez essayer vous
andyb

Pourquoi auriez-vous besoin de plus de 30 feuilles de style sur une seule page de toute façon? Pourquoi auriez-vous besoin de 4 000 règles? Même mes pages les plus complexes dépassent à peine 1000 nœuds, vous devez donc avoir plus de 4 règles par nœud en moyenne pour atteindre la limite ...
Niet the Dark Absol

@Kolink certains (mauvais) systèmes de gestion de contenu utilisent des modèles qui peuvent conduire à l'inclusion de nombreux fichiers CSS. Malheureusement, j'ai vu la <style>limite de 31 atteindre à plusieurs reprises
andyb

@Kolink - Je composant mon application Web. Dans ma tentative actuelle, 30 composants = 30 feuilles de style (minuscules), plus les autres suspects habituels tels que normalize.css. En d'autres termes, j'implémente probablement quelque chose de similaire à ce que andyb appelle «mauvais». : P
Barg

Je crée aussi mon site à partir de composants, mais chaque page définit clairement les composants dont elle a besoin et les importe. Peut-être que vous chargez des composants dont vous n'avez pas besoin, ou peut-être que vos composants sont trop spécifiques et que vous devriez en regrouper certains - je ne peux pas vraiment juger sans en savoir plus.
Niet the Dark Absol

Réponses:


221

En référence à ce qui suit de Microsoft:

Les règles pour IE9 sont:

  • Une feuille peut contenir jusqu'à 4095 sélecteurs (démo)
  • Une feuille peut @importer jusqu'à 31 feuilles
  • L'imbrication @import prend en charge jusqu'à 4 niveaux de profondeur

Les règles pour IE10 sont:

  • Une feuille peut contenir jusqu'à 65534 sélecteurs
  • Une feuille peut @importer jusqu'à 4095 feuilles
  • L'imbrication @import prend en charge jusqu'à 4095 niveaux de profondeur

Test de la règle 4095 par limite de feuille

En guise de confirmation, j'ai créé un résumé avec 3 fichiers. Un HTML et deux fichiers CSS.

  • Le premier fichier contient 4096 sélecteurs et signifie que son sélecteur final n'est pas lu.
  • Le deuxième fichier (4095.css) a un sélecteur de moins, est lu et fonctionne parfaitement dans IE (même s'il a déjà lu un autre sélecteur 4095 du fichier précédent.

2
Ce sont en fait ces deux mêmes liens qui me confondent. La base de connaissances indique "Toutes les règles de style après les 4 095 premières règles ne sont pas appliquées.", Ce qui pour moi implique qu'il s'agit d'une page par page, l'autre lien dit "Une feuille peut contenir jusqu'à 4 095 règles", ce qui implique qu'elle est par -feuille.
Barg

2
Merci beaucoup - cela a confirmé que c'était par feuille, pas par page.
Barg

30
Il convient de noter que la limite de 4095 s'applique aux sélecteurs , pas aux règles .
Christopher Cortez

1
juste pour clarifier: la ligne suivante compterait-elle pour un ou deux "sélecteurs"? div.oneclass, div.anotherstyle {couleur: vert};
anthony

2
@anthony, deux sélecteurs, une règle.
squidbe

116

Un script javascript pour compter vos règles CSS:

function countCSSRules() {
    var results = '',
        log = '';
    if (!document.styleSheets) {
        return;
    }
    for (var i = 0; i < document.styleSheets.length; i++) {
        countSheet(document.styleSheets[i]);
    }
    function countSheet(sheet) {
        if (sheet && sheet.cssRules) {
            var count = countSelectors(sheet);

            log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
            log += '\nRules: ' + sheet.cssRules.length;
            log += '\nSelectors: ' + count;
            log += '\n--------------------------';
            if (count >= 4096) {
                results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
            }
        }
    }
    function countSelectors(group) {
        var count = 0;
        for (var j = 0, l = group.cssRules.length; j < l; j++) {
            var rule = group.cssRules[j];
            if (rule instanceof CSSImportRule) {
                countSheet(rule.styleSheet);
            }
            if (rule instanceof CSSMediaRule) {
                count += countSelectors(rule);
            }
            if( !rule.selectorText ) {
                continue;
            }
            count += rule.selectorText.split(',').length;
        }
        return count;
    }

    console.log(log);
    console.log(results);
};
countCSSRules();

2
Vous êtes un saint pour cela. J'avais un bug que je ne pouvais pas localiser localement, et en raison de notre minification des actifs dans prod, il n'était pas possible de localiser ce qui n'allait pas. J'avais le sentiment que nous dépassions la limite de sélection d'IE, et votre script l'a trouvé pour moi. Merci beaucoup!
robabby

9
Il est à noter que vous ne devez pas exécuter ce script dans IE, car il n'émettra jamais d'avertissement.
user123444555621

1
Merci pour le script. Cela m'a aidé à déboguer une erreur différente
Jdahern

4
Ce script est inexact. Vous devez inclure une branche pour les @mediarègles, voir stackoverflow.com/a/25089619/938089 .
Rob W

1
excellent scénario. gardez à l'esprit que si les feuilles de style proviennent d'un domaine différent de la page Web, vous obtiendrez une valeur nulle pour sheet.cssRules
CodeToad

34

Je n'ai pas assez de représentants pour commenter l'extrait de code similaire ci-dessus, mais celui-ci compte les règles @media. Déposez-le dans la console Chrome.

function countCSSRules() {
    var results = '',
        log = '';
    if (!document.styleSheets) {
        return;
    }
    for (var i = 0; i < document.styleSheets.length; i++) {
        countSheet(document.styleSheets[i]);
    }
    function countSheet(sheet) {
        var count = 0;
        if (sheet && sheet.cssRules) {
            for (var j = 0, l = sheet.cssRules.length; j < l; j++) {
                if (!sheet.cssRules[j].selectorText) {
                    if (sheet.cssRules[j].cssRules) {
                        for (var m = 0, n = sheet.cssRules[j].cssRules.length; m < n; m++) {
                            if(sheet.cssRules[j].cssRules[m].selectorText) {
                                count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length;
                            }
                        }
                    }
                }
                else {
                    count += sheet.cssRules[j].selectorText.split(',').length;
                }
            }
 
            log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
            log += '\nRules: ' + sheet.cssRules.length;
            log += '\nSelectors: ' + count;
            log += '\n--------------------------';
            if (count >= 4096) {
                results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
            }
        }
    }
    console.log(log);
    console.log(results);
};
countCSSRules();

source: https://gist.github.com/krisbulman/0f5e27bba375b151515d


1
C'est bien. Merci d'avoir modifié le script pour inclure les requêtes multimédias. Très, incroyablement, super, très utile !!
tiffylou

1
Ce script est meilleur que celui ci-dessus.
gkempkens

15

Selon une page du blog MSDN IEInternals intitulée Limites de feuille de style dans Internet Explorer, les limites indiquées ci-dessus (31 feuilles, 4095 règles par feuille et 4 niveaux) s'appliquaient à IE 6 à IE 9. Les limites ont été augmentées dans IE 10 comme suit :

  • Une feuille peut contenir jusqu'à 65534 règles
  • Un document peut utiliser jusqu'à 4095 feuilles de style
  • L'imbrication @import est limitée à 4095 niveaux (en raison de la limite de 4095 feuilles de style)

1
Encore une fois, la limite n'est pas dans le nombre de règles , mais dans le nombre de sélecteurs .
connexo

Le texte «règles 4095» ou «règles 65534» provient directement du texte d'un article de blog MS IEInternals 2011 et se trouve également dans KB Q262161. C'est probablement une question de sémantique. Dans de nombreuses définitions de "règle" ou "ensemble de règles", le "sélecteur" est la partie de la "règle" en dehors du "bloc de déclaration" qui peut être un sélecteur unique ou un groupe de sélecteurs. En utilisant cette définition, toutes les règles n'ont techniquement qu'un seul sélecteur, même si ce sélecteur est en fait un groupe de sélecteurs individuels spécifiques. -> suite ->
Night Owl

<- suite <- L'auteur du blog spécule dans les commentaires qu'en interne les groupes de sélecteurs sont clonés de telle sorte que chaque sélecteur individuel dans un groupe de sélecteurs devienne sa propre règle et soit compté individuellement. Ainsi, "65534 sélecteurs" a une signification plus pertinente dans le monde réel, mais "65534 règles" est toujours techniquement correct.
Night Owl

J'ai confirmé que IE 10 a une limite plus élevée (je suppose que la nouvelle limite est 65534 comme Night Owl l'a dit?) Que IE 9 en utilisant l'essentiel de isNaN1247 ( gist.github.com/2225701 ) avec IE 9 et IE 10: developer.microsoft. com / en-us / microsoft-edge / tools / vms / mac
David Winiecki


4

Les outils de développement dans l'édition de développement de FireFox affichent les règles CSS

Cela pourrait être pratique pour ceux d'entre vous qui se battent encore avec les anciennes versions d'IE / les gros fichiers CSS.

Site Web FF Developer Edition

Outils de développement - FF


-1

Je pense qu'il vaut également la peine de noter que tout fichier CSS de plus de 288 Ko ne sera lu que jusqu'à ce ~ 288 Ko. Tout ce qui suit sera complètement ignoré dans IE <= 9.

http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit

Mon conseil est de conserver les fichiers CSS pour les applications plus volumineuses divisés en modules et composants et de garder un œil constant sur la taille des fichiers.


D'après certaines recherches approfondies, il ne semble pas que ce soit une limite de taille de fichier, mais plutôt une limite de sélecteur #. Je n'ai trouvé aucune documentation officielle confirmant ce fait.
Arya

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.