Die CSS-Regeln von Internet Explorer sind begrenzt

150

Ich habe widersprüchliche Informationen zu den albernen CSS-Grenzwerten von Internet Explorer gelesen. Ich verstehe (glaube ich), dass Sie nur 31 <style>und <link>Tags (kombiniert) haben können und dass jedes Blatt bis zu 31 @import-s haben kann (also 31 <link>-s, jedes bis 31 @import-s ist in Ordnung, wenn auch verrückt).

Die 4095-Regel ist jedoch weniger klar - sind dies 4095-Regeln pro Dokument oder pro Blatt? Kann ich <link>zum Beispiel zwei Stylesheets mit jeweils 4000 Regeln verwenden und es funktionieren lassen, oder wird dies die Grenze überschreiten?

Drittanbieter bearbeiten 2018

In diesem msdn-Blogbeitrag werden weitere Informationen zu Stylesheet-Limits-in-Internet-Explorer gegeben.

Barg
quelle
1
Es sieht so aus, als ob das Limit von 4095 laut habdas.org/2010/05/30/msie-4095-selector-limit pro Dokument liegt, und es gibt auch einen Link zu einer Testseite, die Sie selbst ausprobieren können
andyb
Warum brauchen Sie überhaupt mehr als 30 Stylesheets auf einer Seite? Warum brauchen Sie 4.000 Regeln? Selbst meine komplexesten Seiten bekommen kaum mehr als 1.000 Knoten, so dass Sie über 4 Regeln pro Knotendurchschnitt haben
müssten
@Kolink Einige (schlechte) Content-Management-Systeme verwenden Vorlagen, die dazu führen können, dass viele CSS-Dateien enthalten sind. Leider habe ich das 31- <style>Limit mehrmals erreicht
andyb
@Kolink - Ich komponiere meine Webanwendung. In meinem aktuellen Versuch sind 30 Komponenten = 30 (winzige) Stylesheets sowie die anderen üblichen Verdächtigen wie normalize.css. Mit anderen Worten, ich implementiere wahrscheinlich etwas Ähnliches wie das, was andyb als "schlecht" bezeichnet. : P
Barg
Ich mache meine Site auch aus Komponenten, aber jede Seite definiert klar, welche Komponenten sie benötigt und importiert sie. Vielleicht laden Sie Komponenten, die Sie nicht benötigen, oder vielleicht sind Ihre Komponenten zu spezifisch und Sie sollten einige zusammenfassen - ich kann nicht wirklich beurteilen, ohne mehr zu wissen.
Niet the Dark Absol

Antworten:

221

Verweisen auf Folgendes von Microsoft:

Die Regeln für IE9 sind:

  • Ein Blatt kann bis zu 4095 Selektoren enthalten (Demo)
  • Ein Blatt kann bis zu 31 Blätter importieren
  • @import Verschachtelung unterstützt bis zu 4 Ebenen tief

Die Regeln für IE10 sind:

  • Ein Blatt kann bis zu 65534 Selektoren enthalten
  • Ein Blatt kann bis zu 4095 Blätter importieren
  • @import Verschachtelung unterstützt bis zu 4095 Ebenen tief

Testen der 4095-Regel nach Blattlimit

Zur Bestätigung habe ich eine Übersicht mit 3 Dateien erstellt. Eine HTML- und zwei CSS-Dateien.

  • Die erste Datei enthält 4096 Selektoren und bedeutet, dass der endgültige Selektor nicht eingelesen wird.
  • Die zweite Datei (4095.css) hat einen Selektor weniger und wird eingelesen und funktioniert perfekt im IE (obwohl bereits weitere 4095-Selektoren aus der vorherigen Datei gelesen wurden.
isNaN1247
quelle
2
Es sind tatsächlich dieselben zwei Links, die mich verwirrt haben. Die KB sagt "Alle Stilregeln nach den ersten 4.095 Regeln werden nicht angewendet.", Was für mich bedeutet, dass es pro Seite ist, der andere Link sagt "Ein Blatt kann bis zu 4095 Regeln enthalten", was impliziert, dass es pro ist -Blatt.
Barg
2
Vielen Dank - das hat bestätigt, dass es sich um ein Blatt und nicht um eine Seite handelt.
Barg
30
Es ist zu beachten, dass das 4095-Limit für Selektoren gilt , nicht für Regeln .
Christopher Cortez
1
Nur zur Verdeutlichung: Würde die folgende Zeile als ein oder zwei "Selektoren" zählen? div.oneclass, div.anotherstyle {Farbe: grün};
Anthony
2
@anthony, zwei Selektoren, eine Regel.
Squidbe
116

Ein Javascript-Skript zum Zählen Ihrer CSS-Regeln:

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();
EpokK
quelle
2
Sie sind ein Heiliger dafür. Ich hatte einen Fehler, den ich lokal nicht finden konnte, und aufgrund unserer Minimierung der Ressourcen in prod war es nicht möglich, herauszufinden, was falsch lief. Ich hatte das Gefühl, dass wir das Auswahllimit des IE überschritten haben, und Ihr Skript hat es für mich gefunden. Ich danke dir sehr!
Robabby
9
Es ist erwähnenswert, dass Sie dieses Skript nicht im IE ausführen sollten, da es niemals die Warnung ausgibt.
user123444555621
1
Danke für das Drehbuch. Es hat mir geholfen, einen anderen Fehler zu debuggen
Jdahern
4
Dieses Skript ist ungenau. Sie sollten einen Zweig für @mediaRegeln einfügen , siehe stackoverflow.com/a/25089619/938089 .
Rob W
1
tolles Skript. Beachten Sie, dass Sie, wenn die Stylesheets von einer anderen Domain als der Webseite stammen, den Nullwert für sheet.cssRules
CodeToad am
34

Ich habe nicht genug Repräsentanten, um das obige ähnliche Snippet zu kommentieren, aber dieses zählt die @ media-Regeln. Legen Sie es in der Chrome-Konsole ab.

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();

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

krisbulman
quelle
1
Das ist toll. Vielen Dank, dass Sie das Skript so bearbeitet haben, dass es Medienabfragen enthält. Sehr, unglaublich, super, sehr hilfreich !!
Tiffylou
1
Dieses Skript ist besser als das obige.
Gkempkens
15

Laut einer Seite im MSDN IEInternals-Blog mit dem Titel Stylesheet Limits in Internet Explorer gelten die oben angegebenen Grenzwerte (31 Blätter, 4095 Regeln pro Blatt und 4 Ebenen) für IE 6 bis IE 9. Die Grenzwerte wurden in IE 10 auf Folgendes erhöht ::

  • Ein Blatt kann bis zu 65534 Regeln enthalten
  • Ein Dokument kann bis zu 4095 Stylesheets verwenden
  • @import-Verschachtelung ist auf 4095 Ebenen beschränkt (aufgrund der Beschränkung auf 4095 Stylesheets)
Nachteule
quelle
1
Auch hier liegt das Limit nicht in der Anzahl der Regeln , sondern in der Anzahl der Selektoren .
Connexo
Der Text "4095 Regeln" oder "65534 Regeln" stammt direkt aus dem Text in einem Blog-Beitrag von MS IEInternals 2011 und ist auch in KB Q262161 enthalten. Es ist wahrscheinlich eine Frage der Semantik. In vielen Definitionen von "Regel" oder "Regelsatz" ist der "Selektor" der Teil der "Regel" außerhalb des "Deklarationsblocks", der ein einzelner Selektor oder eine Selektorgruppe sein kann. Unter Verwendung dieser Definition haben alle Regeln technisch nur einen Selektor, selbst wenn dieser Selektor tatsächlich eine Gruppe spezifischer einzelner Selektoren ist. -> weiter ->
Nachteule
<- Fortsetzung <- Der Blog-Autor spekuliert in den Kommentaren, dass die Selektorgruppen intern so geklont werden, dass jeder einzelne Selektor in einer Selektorgruppe zu einer eigenen Regel wird und einzeln gezählt wird. Somit hat "65534-Selektoren" eine relevantere reale Bedeutung, aber "65534-Regeln" sind technisch immer noch korrekt.
Nachteule
Ich habe bestätigt, dass IE 10 ein höheres Limit hat (ich nehme an, das neue Limit ist 65534, wie Night Owl sagte?) Als IE 9, indem ich isNaN1247s Gist ( gist.github.com/2225701 ) mit IE 9 und IE 10: developer.microsoft verwendet habe. com / en-us / microsoft-edge / tools / vms / mac
David Winiecki
4

Entwicklertools in der FireFox Dev Edition zeigen CSS-Regeln

Könnte für diejenigen unter Ihnen nützlich sein, die immer noch mit älteren IE-Versionen / großen CSS-Dateien kämpfen.

FF Developer Edition-Website

Entwicklungswerkzeuge - FF

Mike Hague
quelle
-1

Ich denke, es ist auch erwähnenswert, dass jede CSS-Datei, die größer als 288 KB ist, nur bis zu diesen ~ 288 KB gelesen wird. Alles, was danach kommt, wird in IE <= 9 vollständig ignoriert.

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

Mein Rat ist, CSS-Dateien für größere Anwendungen in Module und Komponenten aufzuteilen und die Dateigröße ständig im Auge zu behalten.

Shannon Hochkins
quelle
Aus einigen erweiterten Untersuchungen geht hervor, dass es sich nicht um eine Dateigrößenbeschränkung handelt, sondern um eine Auswahlbeschränkung. Ich konnte keine offizielle Dokumentation finden, die diese Tatsache bestätigt.
Arya