Internet Explorer 的 CSS 规则限制

Question

我阅读了有关 Internet Explorer 愚蠢的 CSS 限制的相互矛盾的信息。我（想我是）理解你只能有 31 个 <style> 和 <link> 标签（组合），并且每张表最多可以有 31 个 @import-s（所以 31 个<link>-s，每个到 31 @import-s 很好，虽然很疯狂）。

但是，4095 规则不太清楚 - 这是每个文档还是每个工作表的 4095 规则？例如，我可以 <link> 到两个样式表，每个样式表都有 4000 条规则，并让它工作，或者这会打破限制吗？

3rd 方编辑 2018

在此msdn blog post stylesheet-limits-in-internet-explorer 上提供了更多信息。

Answer 1

来自 Microsoft 的以下内容：

• Stylesheet Limits in Internet Explorer
• KB - A webpage that uses CSS styles does not render correctly in Internet Explorer

IE9的规则是：

• 工作表最多可以包含 4095 个选择器(Demo)
• 工作表最多可以@import 31 张工作表
• @import 嵌套最多支持 4 层深度

IE10的规则是：

• 工作表最多可包含 65534 个选择器
• 工作表最多可以@import 4095 张工作表
• @import 嵌套最多支持 4095 层

按工作表限制测试 4095 规则

作为确认，I've created a gist 带有 3 个文件。一个 HTML 和两个 CSS 文件。

• 第一个文件包含 4096 个选择器，这意味着它的最终选择器不会被读入。
• 第二个文件 (4095.css) 少了一个选择器，并且被读入，并且在 IE 中完美运行（即使它已经从前一个文件中读取了另外 4095 个选择器。

Answer 2

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

Answer 3

我没有足够的代表来评论上述类似的 sn-p，但这一个算 @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

Answer 4

根据 MSDN IEInternals 博客上名为 Stylesheet Limits in Internet Explorer 的页面，上面显示的限制（31 张，每张 4095 条规则和 4 个级别）适用于 IE 6 到 IE 9。IE 10 中的限制增加到以下：

• 一个工作表最多可以包含 65534 条规则
• 一个文档最多可以使用 4095 个样式表
• @import 嵌套限制为 4095 级（由于 4095 样式表限制）

Answer 5

对于使用 Grunt 的人来说，这个问题的一个很好的解决方案：

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

Answer 6

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

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

FF Developer Edition Website

Answer 7

我认为还值得注意的是，任何大于 288kb 的 CSS 文件只会被读取到 ~288kb。之后的任何内容在 IE

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

我的建议是将大型应用程序的 CSS 文件拆分为模块和组件，并密切关注文件大小。