Internet Explorer的CSS规则限制

我已经阅读了有关Internet Explorer愚蠢的CSS限制的冲突信息。我（想我）理解，您只能有31个<style>和<link>标签（组合），并且每张纸最多可以有31个@import-s（所以31 <link>-s，每个到31个@import-s都很好，尽管很疯狂）。

但是，4095规则不太明确-是每个文档还是每张4095规则？例如，我<link>可以创建两个样式表，每个样式表具有4000条规则，并且可以工作，还是会突破限制？

第三方编辑2018

在此msdn博客文章stylesheet-limits-internet-explorer上提供了更多信息。

从Microsoft引用以下内容：

• Internet Explorer中的样式表限制
• KB-使用CSS样式的网页无法在Internet Explorer中正确呈现

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

我没有足够的代表对上述类似代码段发表评论，但这是@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

根据MSDN IEInternals博客上标题为“ Internet Explorer中的样式表限制”的页面，上面显示的限制（31个工作表，每工作表4095个规则和4个级别）应用于IE 6到IE9。这些限制在IE 10中增加到以下：

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

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

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

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

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

FF开发人员版网站

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

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

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