webentwicklung-frage-antwort-db.com.de

Einschränkungen der CSS-Regeln von Internet Explorer

Ich habe widersprüchliche Informationen zu den albernen CSS-Beschränkungen 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 das 4095-Regeln pro Dokument oder pro Blatt? Kann ich zum Beispiel <link> Auf zwei Stylesheets mit jeweils 4000 Regeln zugreifen und sie funktionieren lassen, oder wird dies die Grenze überschreiten?

3rd Party Edit 2018

Zu diesem msdn Blog-Beitrag Stylesheet-Limits-In-Internet-Explorer werden weitere Informationen gegeben.

149
Barg

Verweisen auf Folgendes von Microsoft:

Die Regeln für IE9 sind:

  • Ein Blatt kann bis zu 4095 Selektoren enthalten (Demo)
  • A sheet kann bis zu 31 Blätter importieren
  • Die @ Import-Verschachtelung unterstützt bis zu 4 Ebenen

Die Regeln für IE10 sind:

  • Ein Blatt kann bis zu 65534 Selektoren enthalten
  • A sheet kann bis zu 4095 Blätter importieren
  • Die @ Import-Verschachtelung unterstützt bis zu 4095 Ebenen

Testen der 4095-Regel nach Blattlimit

Zur Bestätigung: Ich habe ein Gist erstellt mit 3 Dateien. 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, wird eingelesen und funktioniert einwandfrei in IE (obwohl sie bereits weitere 4095 Selektoren aus der vorherigen Datei gelesen hat).
218
isNaN1247

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

Ich habe nicht genug Repräsentanten, um den obigen ähnlichen Ausschnitt zu kommentieren, aber dieser 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

34
krisbulman

Laut einer Seite im MSDN IEInternals-Blog mit dem Titel Stylesheet-Beschränkungen im Internet Explorer gelten die oben angegebenen Beschränkungen (31 Blätter, 4095 Regeln pro Blatt und 4 Stufen) für IE = 6 bis IE 9. Die Limits 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)
15
Night Owl

Eine nette Lösung für dieses Problem für Leute, die Grunt benutzen:

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

5
Tom Teman

Entwicklertools in der FireFox Dev Edition zeigen CSS-Regeln an

Könnte für diejenigen von Ihnen nützlich sein, die noch mit älteren IE versions/large CSS files kämpfen.

FF Developer Edition-Website

Dev tools - FF

4
Mike Hague