Die CSS-Regeln von Internet Explorer sind begrenzt

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.

Verweisen auf Folgendes von Microsoft:

• Stylesheet-Einschränkungen in Internet Explorer
• KB - Eine Webseite, die CSS-Stile verwendet, wird in Internet Explorer nicht korrekt gerendert

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.

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

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

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)

Eine gute Lösung für dieses Problem für Benutzer von Grunt:

https://github.com/Ponginae/grunt-bless

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

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.