Internet Explorer的CSS规则限制

Question

我读过有关Internet Explorer愚蠢的CSS限制的相互矛盾的信息.我(我想)理解你只能拥有31个<style>和<link>标签(组合),并且每个工作表最多可以有31个@import(所以31个<link>,每个31个@import也很好,虽然很疯狂).

但是,4095规则不太清楚 - 每个文档或每张文件是4095规则吗？例如,我<link>可以使用两个样式表,每个样式表有4000个规则,并且可以使用它,还是会突破极限？

第三方编辑2018年

在这个msdn博客文章中,stylesheet-limits-in-internet-explorer给出了进一步的信息.

Answer 1

请参阅Microsoft的以下内容:

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

IE9的规则是:

• 一张纸最多可包含4095个选择器(演示)
• 一张纸可以@import最多31张
• @import嵌套最多可支持4个级别

IE10的规则是:

• 工作表最多可包含65534个选择器
• 一张纸可以@import最多4095张
• @import嵌套支持最多4095级深度

按工作表限制测试4095规则

通过确认,我创建了一个包含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

我没有足够的代表来评论上面的类似代码片段,但是这个代表了@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博客上的一个页面,名为Internet Explorer中的样式表限制,上面显示的限制(31张,每张4095规则,4个级别)通过IE 9应用于IE 6.IE 10中的限制增加到以下:

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

Answer 5

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

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