Internet Explorer 的 CSS 规则限制

小开

最佳答案

参考 Microsoft 的以下内容:

IE9的规则是:

一个床单可能包含多达4095个选择器 (演示)
一个床单可以@导入多达31张纸
@ import 嵌套最多支持4级深度

IE10的规则是:

床单可能包含多达65534个选择器
床单可以@导入多达4095张纸
@ import 嵌套支持4095级深度

对4095规则的纸张限制进行测试

作为确认，我创造了一个要点有3个文件。一个 HTML，两个 CSS 文件。

第一个文件包含4096个选择器，这意味着它的最终选择器不会被读入。
第二个文件(4095。Css)少了一个选择器，可以读入，并且在 IE 中工作得很好(尽管它已经从前一个文件中读取了另外4095个选择器。

小开

一个计算 CSS 规则的 javascript 脚本:

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

小开

根据 MSDN IEInternals 博客上一个题为样式表的 Internet Explorer 限制的页面，上面显示的限制(31张，每张4095条规则，和4个级别)适用于 IE6到 IE9。IE 10的限制增加到如下:

一张表可能包含多达65534条规则
一个文档最多可以使用4095个样式表
@ import 嵌套限制为4095级(由于样式表限制)

小开

对于使用 Grunt 的人来说，这是一个很好的解决方案:

Https://github.com/ponginae/grunt-bless

小开

我没有足够的名声来评论上面类似的片段，但是这一个计数@media 规则。放入 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();

来源: https://gist.github.com/krisbulman/0f5e27bba375b151515d

小开

我认为值得注意的是，任何大于288kb 的 CSS 文件只能读取到288kb。之后的内容在 IE < = 9中将被完全忽略。

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

我的建议是将大型应用程序的 CSS 文件分成模块和组件，并始终关注文件大小。

小开

FireFox 开发版本中的开发工具显示了 CSS 规则

对于那些仍在使用旧的 IE 版本/大型 CSS 文件的人来说，这可能很方便。

开发者版网站

Internet Explorer 的 CSS 规则限制

2018第三方编辑