Internet Explorer's CSS rules limits - css

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

Answer 3

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

Answer 4

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)

Answer 5

A nice solution to this problem for people using Grunt:
https://github.com/Ponginae/grunt-bless

Answer 6

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

Answer 7

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.