What are Internet Explorer's CSS Rule Limits, and How Do They Apply?

Internet Explorer's CSS Rule Limits Explored

Introduction

Internet Explorer, once a dominant web browser, has been known for its limitations, including those imposed on CSS rules. Understanding these limitations is crucial for web developers to ensure cross-browser compatibility.

Per-Sheet or Per-Document Rule Limit?

A common misunderstanding is related to the 4095 rule limit. Some sources suggest that this limit applies to the entire document, while others claim it pertains to individual stylesheets.

The Answer according to Microsoft

According to Microsoft's official documentation, the rule limit in Internet Explorer follows a per-sheet model. This means:

• Each individual stylesheet can contain up to 4095 selectors (IE9) or 65534 selectors (IE10).
• A stylesheet can import up to 31 (IE9) or 4095 (IE10) other stylesheets.
• Imported stylesheets can be nested up to 4 levels (IE9) or 4095 levels (IE10).

Testing the 4095 Rule by Sheet Limit

To verify the per-sheet rule limit, a test case was conducted using three files:

• HTML: An HTML file linking to two CSS files.
• 1.css: Contained 4096 selectors.
• 2.css: Contained 4095 selectors.

When viewed in Internet Explorer, it was observed that the final selector in the first CSS file (1.css) was not applied, confirming the 4095 rule limit per stylesheet.

Conclusion

Internet Explorer's CSS rule limits, once a significant concern, have been addressed with increasing versatility in later versions. Developers should be aware of the current limits and optimize their stylesheets accordingly to ensure compatibility across different browsers.

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