What are the CSS Selector Limits in Internet Explorer and How Do They Differ Across Versions?

Internet Explorer: Navigating CSS Limits

Internet Explorer imposes a set of limits on CSS usage. These limitations can cause confusion and disruptions to website rendering.

Understanding the 4095 Rule

One of the most debated limits is the 4095 rule. This refers to the maximum number of selectors allowed within a CSS sheet or document. However, the question remains: is this limit per sheet or per document?

According to Microsoft's official guidelines, the 4095 rule applies per sheet, not per document. This means that you can link to multiple CSS sheets, each containing up to 4095 selectors, and they will all work correctly.

IE9 vs IE10

The limits imposed by Internet Explorer have evolved over different versions. For IE9:

• A CSS sheet can contain up to 4095 selectors.
• A sheet can import up to 31 other sheets.
• Import nesting is supported up to 4 levels deep.

For IE10 and later:

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

These changes provide greater flexibility for website development, allowing for the use of more complex and comprehensive CSS.

Example Test Case

To confirm the per-sheet limit, a test was conducted using two CSS files. One file contained 4096 selectors, while the other had 4095 selectors. The HTML document linked to both files.

The results showed that the first file did not load its final selector, while the second file loaded and behaved correctly in Internet Explorer. This confirms that the 4095 rule applies per sheet.

By understanding these CSS limits in Internet Explorer, web developers can optimize their code and avoid potential rendering issues.

The above is the detailed content of What are the CSS Selector Limits in Internet Explorer and How Do They Differ Across Versions?. For more information, please follow other related articles on the PHP Chinese website!