Stylesheet Limits in Internet Explorer
KB 262161 outlines the maximum number of stylesheets and rules supported by Internet Explorer 6 to 9.
- A sheet may contain up to 4095 rules
- A sheet may @import up to 31 sheets
- @import nesting supports up to 4 levels deep
Some folks have wondered about the math that underlies these numbers. 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-sheet limitation. While these limits are entirely sufficient for most sites, there are some sites (particularly when using frameworks and controls) that can encounter the limits, requiring workarounds.
There’s a simple test page for the limits here.
-Eric
Update: IE10 Platform Preview #2 significantly raises the limits described above. In IE10 (any browser/document mode):
- A sheet 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)
Comments
Anonymous
May 15, 2011
Actually the 4095 is a Selectors-per-sheet limitation and not a rules-per-sheet limitation. See this test page: demos.telerik.com/.../4095issues.html. If you add more selectors to an existing rule fewer and fewer rows will be highlighted in red.Anonymous
May 16, 2011
@Zoompf: I suspect that internally, the rules are cloned for each selector, leading to the behavior you describeAnonymous
May 16, 2011
Does it still use a 32-bit integer in the 64-bit version of Internet Explorer? I would assume it does, given the KB article doesn't exclude the 64-bit compiles from the Applies To section.Anonymous
May 16, 2011
@Warren: Yes, it's still a 32bit integer when running 64bit; you can easily observe this by loading the test page in 64bit IE.Anonymous
May 18, 2011
Actually, I think this applies to IE3, 4, 5 and 5.5 as well. I thought it was a neat trick when I wrote the code. :)Anonymous
May 18, 2011
:-) Thanks for the history! I usually avoid talking about anything before IE6 on the grounds that I don't have either source or VMs for those ancient platforms.Anonymous
May 19, 2011
Thanks. Now I feel even OLDER. :)Anonymous
May 24, 2011
I'll second Zach's question: Are there any plans to "fix" this? Or at least exapand the limit on 64bit version by using 64bit int? Especially the 31 imports issue is annoying, it is surfacing in a lot of frameworks and cms systems where you normally pack/compress lots of js files togheter, but in "development mode" you just serve the source files direclty.Anonymous
May 24, 2011
@Zach, @Andre: Folks who are new to this blog should understand that its posts do not, as a rule, discuss plans for future versions of IE. In rare instances, the IEBlog (http://blogs.msdn.com/b/IE) will have "forward-looking" posts, but you won't find those here.Anonymous
June 20, 2011
But Eric, do you know of a trick to work around this? Can you point me to links? I have more than 31 links in too many pages with 3rd party controls on them. [EricLaw: I'm not sure what you mean by "trick"-- this is a hardcoded limit in the code. The way to workaround it is to use a smaller number of stylesheets (which probably will improve performance too) by combining or otherwise eliminating sheets.]Anonymous
December 06, 2011
http://blesscss.com/ Solves some of the problems...Anonymous
January 13, 2012
The comment has been removedAnonymous
January 13, 2012
@Tom: The limits I gave are accurate. I'll talk to the owner.Anonymous
January 06, 2013
The comment has been removedAnonymous
July 19, 2014
I've written on this topic after encountering it in the past. Article linked here: www.habdas.org/msie-4095-selector-limitAnonymous
October 02, 2014
Heads up: IE11 in various document modes does NOT appear to apply this limit (at least not the smaller one).