40

In an answer about CSS, a user said:

Internet Explorer has is said to have a limit of 4096 CSS rules per file. Reference

Also, it has a limit on the number of style sheets you can embed in a single document. I think it is 20.

While the reference on MSDN seems to confirm this (and there's a blog post which confirms this in IE7), is this still the case for IE8?

Community
  • 1
  • 1
Piskvor left the building
  • 91,498
  • 46
  • 177
  • 222
  • 7
    If you have 20 different stylesheets on a page, you are doing something wrong! – Oded Jul 09 '10 at 11:07
  • @Oded: True that. Automatically generating most of the document using a ridiculously complex algorithm can get you there; and sometimes you don't have authorization to refactor the aforementioned algorithm. – Piskvor left the building Jul 09 '10 at 11:09
  • are you threatened if so? *"ridiculously complex algorithm"* should be simplified then. more than 2-3 stylesheet makes your website feel sluggish. It'll be a real pain for your users to load the pages. – gblazex Jul 09 '10 at 11:09
  • 4
    @galambalazs: Relax, it's not a matter of life or death. – Piskvor left the building Jul 09 '10 at 11:10
  • @galambalazs: As I mentioned, I don't have authorization to work on the algorithm. If it's any comfort, it's an internal app, so the number of suffering users isn't enormous. – Piskvor left the building Jul 09 '10 at 11:17
  • 2
    @Oded - 1 reset, 11 layout (print, mobile, screen, ie-specific, ie7-specific, ie6-specific, iphone, ipad, iphone4, portrait and landscape), 1 typography, 3 color themes = 16 total. yep, 20 does seem a bit high... – Franci Penov Jul 09 '10 at 11:22
  • 6
    This is not 'ridiculous' by any stretch. It sounds like you're considering a wide range of layout scenarios, and offering several palettes for each layout is certainly commonplace. This is a perfectly reasonable approach. I don't know IE's internal limit - but whatever it is, it simply defines a design constraint, not some universal law of too-much-ness. –  Jul 09 '10 at 11:28
  • @Superstringcheese: "ridiculous" was meant to describe the complexity of the server-side algorithm (which generates a long list of small-to-medium-sized CSS files for every HTML page), not the decision to cut off at 31 (which is quite enough in most cases). – Piskvor left the building Jul 09 '10 at 11:35
  • @Franci Penov much of the `layout` has nothing to do with IE 8. So if you put the **necessary at the top**, IE 8 will **ignore others** like: `ie7-specific, ie6-specific, iphone, ipad, iphone4`. Then what? Seems like no-problem to me... Also you've got **conditional comments** for different versions of IE, so you can **ignore** ie-6 specific CSS for IE 8, and vica versa... – gblazex Jul 09 '10 at 11:36
  • @galambalazs - yes, I am aware of that. however, that does not reduce the number of stylesheets linked by the document. also, conditionals exclude only the IE-specifics, so these three might not be downloaded. however, all the rest will be downloaded, even if the browser won't apply the rules due to a media query exclusion (both IE8 and Chrome 6 do this). in any case, my point was that it's not that ridiculous to have a lot of stylesheets, due to the proliferation of devices in the recent years. having one CSS is a thing of the past. – Franci Penov Jul 09 '10 at 16:12
  • The reason Piskvor is using so many stylesheets is another issue, yes, in a real scenary a better approach is to use less files, but he is asking a completly another thing – Pherrymason Jul 14 '11 at 21:24
  • @clinisbut: Thank you for the commentary. Note my first comment: the situation was very real, and I didn't have a way (or authorization) to decrease the number of stylesheets - not every app is developed by one person who may change any component as he sees fit. – Piskvor left the building Jul 15 '11 at 06:44
  • 15
    Legit reason for more than 31 stylesheets: In dev mode I have a bunch of small, easy to debug stylesheets that are compiled into one file for production. With the asset pipeline in Rails this is easy to do and keeps concerns nicely separated. Unfortunately it makes dev-mode testing in IE even more difficult than it is normally with all of IE's other quirks. – Marcus Mar 22 '13 at 16:28

6 Answers6

55

Yes, IE8 (and even IE9 apparently) limit the number of style sheets to 31 per page.

Telerik has an article and test page which demonstrate the issue. According to comments in the same article, the 4096 rules per file limitation has been marked as Won't Fix in Microsoft Connect but I've been unable to verify that.

goodeye
  • 2,389
  • 6
  • 35
  • 68
Chris Van Opstal
  • 36,423
  • 9
  • 73
  • 90
  • 1
    Won't fix? Oh well...it seems to be an edge case for MS, and it's a corner case for me. I'll try for some sort of server-side CSS combiner/minifier then. – Piskvor left the building Jul 09 '10 at 11:32
  • (I'm aware that combining the files won't help with the "4096 rules" problem, but I'm not about to hit *that* limit, by a long stretch) – Piskvor left the building Jul 09 '10 at 11:46
  • 3
    Microsoft say the don't plan to fix this here: https://connect.microsoft.com/IE/feedback/details/542903/ie9-platform-preview-does-not-load-more-than-4095-css-selectors-on-a-page – Tor-Erik Jul 09 '10 at 11:47
  • 2
    If you're using rails, you can combine css files to fix this by adding the following to your config/environments/development.rb file: config.assets.debug = false – Ryan Jun 17 '14 at 21:49
  • Microsoft deserves all the hate against Internet Explorer that it has had over the years. This is some absolute bullshit. I've used countless of hours debugging this shit, having only "SCRIPT87: Invalid argument." error message without filename and line to start debugging. This missing filename and line was because Dojo library used Deferreds which swallowed exceptions, and IE9's (the real IE9 was the only browser where this hard-to-debug bug manifested) shitty excuse of a debugger doesn't let you catch caught exceptions. So I had to manually strip all try-catches away from Dojo to find this. – joonas.fi Jul 22 '15 at 14:15
5

This thread suggests there is a limit of 31 CSS references per page/CSS file but that you can achieve more than that by using @import and a nested hierarchy of CSS files.

More info from a Telerik blog on the issue making it clearer that this applies to IE8.

Daniel Renshaw
  • 33,729
  • 8
  • 75
  • 94
  • Is there any concern about browser cache when I use @import? – padis Apr 25 '12 at 22:12
  • @padis Sounds like this should be a separate question. However, http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ gives some info on the perf impact of `@import`. Assuming the CSS is reasonably static, it seems best to dynamically aggregate your CSS together into a single virtual file whenever possible. – Daniel Renshaw Apr 26 '12 at 05:38
4

Microsoft claims the limit is 30, but the limit is apparently 31 according to Telerik. The Telerik blog also mentions a 4095 selectors per file limit.

Tor-Erik
  • 990
  • 8
  • 25
3

Thanks to the above testing script I have just confirmed this limitation (apparently 30) still exists even in Internet Explorer 9!

Vacilando
  • 2,819
  • 2
  • 30
  • 27
0

I was building a site and hit this issue myself. It was driving me batty until a co-worker pointed this 31 CSS files issue out. Looking into it what struck me that it's more complicated than that because IE8 seemed to be loading some of the styles from the sheet but not all of them. It was ignoring media queries and chained classes just like it was behaving in Quirks mode — even though it wasn't in Quirks mode and both those were in the same CSS file as other CSS that was being used. Once I aggregated the CSS files into one file it all worked fine. Anyway I just wanted to point out that somehow this 31 limit also seems to trigger something like Quirks mode.

user3547136
  • 1
  • 1
0

If you use NPM get Bless installed it sorts out the problem for you

Matthew White
  • 65
  • 1
  • 9