Internet Explorer's CSS rules limits

I've read conflicting information regarding Internet Explorer's silly CSS limits. I am (think I am) understanding that you can only have 31 <style> and <link> tags (combined), and that each sheet can have up to 31 @import-s (so 31 <link>-s, each to 31 @import-s is fine, albeit insane).

However, the 4095 rule is less clear - is this 4095 rules per document, or per sheet? For instance, can I <link> to two stylesheets, each with 4000 rules, and have it work, or will this break the limit?

3rd party edit 2018

On this msdn blog post stylesheet-limits-in-internet-explorer further information is given.

Referring the following from Microsoft:

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

The rules for IE9 are:

• A sheet may contain up to 4095 selectors (Demo)
• A sheet may @import up to 31 sheets
• @import nesting supports up to 4 levels deep

The rules for IE10 are:

• A sheet may contain up to 65534 selectors
• A sheet may @import up to 4095 sheets
• @import nesting supports up to 4095 levels deep

Testing the 4095 rule by sheet limit

By way of confirmation, I've created a gist with 3 files. One HTML, and two CSS files.

• The first file contains 4096 selectors and means that its final selector doesn't get read in.
• The second file (4095.css) has one less selector, and gets read in, and works perfectly in IE (even though its already read another 4095 selectors from the previous file.

A javascript script to count your CSS rules:

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

I don't have enough rep to comment on the above similar snippet, but this one counts the @media rules. Drop it in Chrome console.

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

source: https://gist.github.com/krisbulman/0f5e27bba375b151515d

According to a page on the MSDN IEInternals blog entitled Stylesheet Limits in Internet Explorer the limits shown above (31 sheets, 4095 rules per sheet, and 4 levels) applied to IE 6 through IE 9. The limits were increased in IE 10 to the following:

• A sheet may contain up to 65534 rules
• A document may use up to 4095 stylesheets
• @import nesting is limited to 4095 levels (due to the 4095 stylesheet limit)

A nice solution to this problem for people using Grunt:

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

Developer tools within FireFox dev edition shows CSS rules

Might be handy for those of you still fighting with older IE versions / large CSS files.

FF Developer Edition Website

I think it's also worth noting that any CSS file larger than 288kb will only be read up until that ~288kb. Anything after will be completely ignored in IE <= 9.

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

My advice is to keep CSS files for larger applications split up into modules & components and keep a constant eye on filesize.