Stylesheet limits in IE

Frankly speaking, I like/use IE because of two reasons:

1. It has good integration with VS, so it brings powerful javascript debugging tool for me. Firebug is absolutely the best debugging tool of all the times, but it can’t handle enterprise-level application debugging (it reaches the father and mother of memory very quickly).

2. Almost all enterprise-level users use IE because of their companies policy, so as a web developer I have to use whatever our users use.

But sometimes it makes me frustrating… Especially after looking for a needle in a haystack for a half of the day. Hope this post will save someone’s day.

KB 262161 outlines the maximum number of stylesheets and rules supported by Internet Explorer 6 to 9.

  • The browser will process up to 4095 rules, but not more
  • A sheet may @import up to 31 sheets
  • @import nesting supports up to 4 levels deep

The root of the limitations is that Internet Explorer uses a 32bit integer to identify, sort, and apply the cascading rules. The integer’s 32bits are split into five fields: four sheetIDs of 5 bits each, and one 12bit ruleID. The 5 bit sheetIDs results in the 31 @import limit, and the 12 bit ruleID results in the 4095 rules-per-page limitation. While these limits are entirely sufficient for most sites, there are some huge and/or flexible web applications which can encounter the limits.

Although IE10 Platform Preview #2 significantly raises the limits described above. In IE10 (any browser/document mode):

  • A page may contain up to 65534 rules
  • A document may use up to 4095 stylesheets
  • @import nesting is limited to 4095 levels (due to the 4095 stylesheet limit)

So my advice here is to combine several stylesheets into single one in order to avoid more than 31 stylesheets on your page and try to minimize amount of styles applied to your page by using media queries or javascript code (similar to mobile web browsers).