dean.edwards.name/weblog/2010/02/bug85/

Comment: #1

Wow, that’s… Strange. Apparently, Microsoft thinks 31 stylesheets is too much.

Comment: #2

I encountered the same problem last year while working on a JS based theme implementation, and after a lot of Googling I found one MSDN document which states exactly what you said… strange thing…. IE rulez

Comment: #3

That is expected behavior of IE. Check MSDN. They know about it and it is a part of docs

Comment: #4

Here are the links:

This one describes the issue in the actual MSDN article: http://msdn.microsoft.com/en-us/library/aa752571%28VS.85%29.aspx

This one describes the issue and a proposed solution in the only comment for that article: http://msdn.microsoft.com/en-us/library/ms531194%28VS.85%29.aspx

Comment: #5

We found out about that too in Xopus; after too many full redraws the document you we’re editing held a interim CSS Naked Day.

Comment: #6

We found this the hard way as well, but by including too many style sheets in our development environments (they get compressed together for live). Our work around was to include extra style sheets inside a ‘parent’ sheet using @import.

IE Counts up to 30 within each style sheet. So you can have 30 sheets each including 30 other sheets if you want.

Comment: #7

Just for once, I’d commend IE for making sense. Trying to put more than 30 stylesheets in a single document (or actually more than 3-4, for that matter), SHOULD BE TREATED AS AN INVALID OPERATION.

Comment: #8

We have faced this issue in CKEditor also. The only solution was using existing style elements by appending new rules to them. Only if Dean can point us to any weird workaround

That’s sad though.

Comment: #9

@Fred, I got around the bug by creating a <style> element instead:

for (var i = 0; i < 32; i++) {
  document.getElementsByTagName("head")[0].appendChild(document.createElement("style"));
  var styleSheet = document.styleSheets[document.styleSheets.length - 1];
  styleSheet.cssText = "p{color:red;}";
}

Comment: #10

@Ian, snap!

@Dean, thanks for pointing this one out. I literally ran into this problem today and was scratching my head over why a style wasn’t being applied. One look in the IE developer toolbar and I found the problem. However, without my RSS reader picking this up today I would have been scratching for a good deal longer!

Comment: #11

MS should increase that number to 640k. there’s no way anyone would need even that many.

Comment: #12

Nice!

Thanks for the info Dean and everyone
Another one to add to my book of IE deficiencies

Comment: #13

There is also maximum amount of rules: only first 4095 will be parsed by IE. (It’s said that multiple selectors in a single rule counts as extra rule each). http://msdn.microsoft.com/en-us/library/aa358796(VS.85).aspx

And some believe that IE will not parse anything beyond 288 kB file size of external stylesheet, but I’ve never seen any confirmation for this.

Comment: #14

Although I can’t think of a natural use for more than 30 style elements on any given page – I still don’t see why it should be limited.

I’m sure it doesn’t take a lot of resources for IE to merge all of these style elements together before parsing them?

Thanks.

Comment: #15

@Fred, @dean

Even though document.getElementsByTagName(“style”).length can be greater than 31, document.styleSheets.length won’t be greater than 31. So I think only the beginning 31 style elements will affect CSS rendering.

Here is my solution, appending CSS text to the last style sheet object:

var sheet = null;
try {
	sheet = document.createStyleSheet ();
	sheet.cssText = cssText;
} catch (e) {
	sheet = document.styleSheets[document.styleSheets.length - 1];
	sheet.cssText += "\r\n" + cssText;
}

Or choose the style sheet with minimal CSS text:

var sheet = null;
try {
	sheet = document.createStyleSheet ();
	sheet.cssText = cssText;
} catch (e) {
	var min = 0;
	var idx = 0;
	for (var i = 0; i < document.styleSheets.length; i++) {
		var style = document.styleSheets[i];
		if (min == 0) {
			min = style.cssText.length;
			idx = i;
		} else if (min > style.cssText.length) {
			min = style.cssText.length;
			idx = i;
		}
	}
	sheet = document.styleSheets[idx];
	sheet.cssText += "\r\n" + cssText;
}

Comment: #16

I found a similar thing with arrays.

I’d written a script to help me practise my French, but when I got to around the 7000th entry into the array the whole thing just stopped working.

It remained fine in firefox, though – so it seems that IE must also have limits on how many items you can have in an array.

Comment: #17

You should change the number “30” in the title to “31” as IE’s limit for the number of CSS files is 31! This issue is well known to Drupal developers as Drupal depends on “modules”, many of which loads it’s own CSS file which in turn can lead to a large number of CSS files. One solution for this seems to use “@import” to include CSS files. Though it’s not a good idea, it does allow including any number of CSS files. Anyway of implementing that using JS?

Comment: #18

Hey @Fred, @dean I am getting error at sheet.cssText = cssText; Error is cssText is undefied. what will be cssText value. Will it be null or something else??

Comment: #19

I really appreciate this behavior: 30 StyleSheet ? really ?! but I don’t like the fact that IE, is really strict on so many levels and things :/