What are Internet Explorer's CSS Rule Limits and How Do They Differ Between IE9 and IE10?

Internet Explorer's CSS Rule Limits: Unveiling the Truth

Internet Explorer's limitations on CSS rules, particularly with regard to the infamous "4095-rule limit," have been a source of confusion for web developers. However, by studying Microsoft's documentation and conducting empirical testing, we can provide a clear understanding of these limits.

4095 Rule: Per Sheet or Per Document?

The 4095-rule limit refers to the number of rules that a single stylesheet (or "sheet") can contain. It does not apply to the total number of rules in a web document. Therefore, it is possible to link to multiple stylesheets, each containing less than 4095 rules, without exceeding the limit.

IE9 vs. IE10

The rule limits differ between IE9 and IE10.

IE9:

• A sheet can contain up to 4095 selectors.
• A sheet can import up to 31 other sheets.
• Import nesting depth is limited to 4 levels.

IE10:

• A sheet can contain up to 65534 selectors.
• A sheet can import up to 4095 other sheets.
• Import nesting depth can go up to 4095 levels.

Testing the 4095 Rule

To confirm the 4095-rule limit, I created a test case with three files:

• HTML file
• CSS file with 4096 selectors (4096.css)
• CSS file with 4095 selectors (4095.css)

The 4096.css file fails to load its final selector due to exceeding the limit. However, the 4095.css file loads successfully, demonstrating that the limit is applied per sheet.

The above is the detailed content of What are Internet Explorer's CSS Rule Limits and How Do They Differ Between IE9 and IE10?. For more information, please follow other related articles on the PHP Chinese website!