What are the CSS Rule Limits in Different Versions of Internet Explorer?

Internet Explorer's CSS Limits: A Matter of Megabytes and Layers

As developers, we're often constrained by the limitations of our tools. Internet Explorer, once a dominant force in the web browser market, has long been known for its quirks and limitations, and CSS rules have been no exception.

One of the most infamous Internet Explorer CSS limits pertains to the number of CSS rules that can be loaded into a single webpage. Prior to IE9, this limit was a mere 4095 rules, irrespective of the number of style sheets used. However, IE9 and later brought significant improvements, allowing for substantially more rules.

In IE9, a single style sheet can contain up to 4095 selectors, while @import rules can nest up to four levels deep. This would effectively allow for a total of 4095 * 4 = 16380 rules per page.

With the release of IE10, the CSS rule limit was further expanded to 65534 selectors per style sheet and 4095 levels of @import nesting. This translates to a whopping 4095 * 4095 = 16,777,215 rules per page.

While these limits seem more than adequate for most web development scenarios, it's worth noting that they apply to each style sheet individually. Therefore, if you have multiple style sheets linked to a single webpage, each of those style sheets will have its own set of limits.

To summarize:

• IE9: Up to 4095 rules per style sheet, 31 @import rules per style sheet, 4 levels of @import nesting, 16380 rules per page.
• IE10: Up to 65534 rules per style sheet, 4095 @import rules per style sheet, 4095 levels of @import nesting, 16,777,215 rules per page.

The above is the detailed content of What are the CSS Rule Limits in Different Versions of Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!