Internet Explorer'S CSS Rules Limits

Internet Explorer's CSS rules limits

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.

Counting CSS rules for IE's rule limit

Judging by several people's attempts to solve this issue, it's a limit on selectors. Meaning you split each line at commas , when counting (as this example of a selector counter does: https://stackoverflow.com/a/20496041/624590 )

Which means your example counts as 5 points against the 4095 limit.

If you wish to prove it to yourself, take your IE browser to this page I set up: http://dylancodes.net/wayBack/ie9selectors/

It counts a few extra, to 4097, in a stylesheet formatted as:

.test0, .test1, .test2, ..., .test4097 { background: green; }

I've only checked using IETester software, but it seems the first three divs failed to get the color (counting from 0, so 4094 is the 4095th item, so there are three beyond the rule).

Does IE 8 have a limit on number of stylesheets per page?

Yes, IE8 (and even IE9 apparently) limit the number of style sheets to 31 per page.

Telerik has an article and test page which demonstrate the issue. According to comments in the same article, the 4096 rules per file limitation has been marked as Won't Fix in Microsoft Connect but I've been unable to verify that.

Is there a CSS file size limit in IE9?

After extensive testing and research, I have to conclude that no such limit exists for IE9. Why there are many rumors on the internet about it, I have no clue, but I could not find any official documentation of the fact. Any suggestion of this fact has just been unsupported Stack Overflow comments or random blog posts. After making my own CSS that was over 288KB, and seeing it successfully load all rules, I don't see how this limit could exist. It's possible these people were hitting the selector limit, but I can't investigate further as there are no files that exist that are over 288KB, don't hit the selector limit, and are purported to not fully load in IE9. I hope future developers can see this question, and not waste as much time on this random IE9 tidbit as I have.

How are media queries counted in IE's CSS selectors limit?

It appears that media queries are not included in the selector limit. All rules within all media queries are counted though.

I wrote a test that performs a binary search to find the turning point where the last selector is ignored. It is available at https://robwu.nl/s/css-selector-limit-test.html. The binary search runs over the range 0 - 4200 and reports how often the input selector fits until the last selector is not applied any more. If the result is greater than 4096, the test case reports "infinity".

Results:

Turning point at 4095 for: #DUMMY{color:red;}
Turning point at 4095 for: @media screen(min-width:9px) { #DUMMY {color:red;} }
Turning point at 2047 for: @media screen(min-width:9px) { #DUMMY, #DUMMY {color:red;} }
Turning point at 1023 for: @media screen(min-width:9px) { #DUMMY {color:red;} #DUMMY, #DUMMY, #DUMMY {color:red;} }
Turning point at 1364 for: @media screen(min-width:9px) { #DUMMY {color:red;} } @media screen(max-width:9px) {#DUMMY, #DUMMY {color:red}}
Turning point at 1364 for: @media screen(min-width:9px) { #DUMMY {color:red;} } @media screen(max-width:9px) {#DUMMY {color:red;}} @media screen(max-width:9px){ #DUMMY {color:red;}}
Turning point at infinity for: @media screen (min-width:9px) { }
Turning point at infinity for: @media screen (min-width:9px) { } @media screen (min-width:9px) { } @media screen (min-width:9px) { }
Turning point at infinity for: @font-face { font-family: "blablablablabla"; } 

The last three tests show that media queries (and other at-rules such as @font-face) are not counted in the selector limit.

I have seen many "css rule" counter scripts here on Stack Oveflow (e.g. https://stackoverflow.com/a/20496041 and https://stackoverflow.com/a/12313690), but all of them are wrong, unfortunately. A media query appears as one entry in the cssRules/rules list. The right way to count the number of selectors in a stylesheet is to recursively process the style sheet to deal with (nested) @media at-rules.

Does IE9 have a file size limit for CSS?

There are 3 limits:

• a sheet may contain up to 4095 selectors, see
  http://demos.telerik.com/testcases/4095issues.html
• a sheet may @import up to 31 sheets, see http://demos.telerik.com/testcases/BrokenTheme.aspx
• @import nesting supports up to 4 levels deep

Microsoft support/MSDN reference links:

http://support.microsoft.com/kb/262161

http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx

---

Related Topics