Internet Explorer's CSS rules limits

Question

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.

Answer 1

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.

Answer 2

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