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.
Verweisen auf Folgendes von Microsoft:
- Einschränkungen für Stylesheets in Internet Explorer
- KB - Eine Webseite, die CSS-Stile verwendet, wird im Internet Explorer nicht korrekt dargestellt
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).
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 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
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)
Eine nette Lösung für dieses Problem für Leute, die Grunt benutzen:
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.
