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.
Answer
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.