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

MSIE’s document.createStyleSheet() throws an error if there are more than 30 existing style sheets

I’m currently doing a round of bug fixing for IE7.js.

Bug #85 highlights a bug in Internet Explorer that I was unaware of:

<!doctype html>
<title>document.createStyleSheet() test</title>
<script>
for (var i = 0; i < 32; i++) {
  document.createStyleSheet(); // throws when i == 31
}
</script>

It doesn’t matter if the style sheets are created with JavaScript or not. Calling document.createStyleSheet() with 30 existing style sheets will throw the error:

Error: Invalid argument.

Comments (20)

Leave a comment

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

  • Comment by: Ben L.
  • Posted:

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 by: arnabc
  • Posted:

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

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

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 by: Robbert
  • Posted:

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 by: Ian
  • Posted:

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 by: klooog
  • Posted:

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 by: FredCK
  • Posted:

@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 by: -dean
  • Posted:

@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 by: Ben
  • Posted:

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

  • Comment by: unacoder
  • Posted:

Nice!

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

  • Comment by: Justin
  • Posted:

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 by: Michal Čaplygin
  • Posted:

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 by: Warica
  • Posted:

@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;
}

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.

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 by: Abhijit
  • Posted:

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 by: Rajesh Gite
  • Posted:

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 :/

  • Comment by: Abderrahmane TAHRI JOUTI
  • Posted:

If getting a low price is your http://www.jonathan-saunders.com/favicon.html main concern, avoid “discount” or “cheap” UGG knockoffs http://www.australiapackages.co.uk and buy lookalike, non-sheepskin boots from a legitimate competing brand.

  • Comment by: debeccatis
  • Posted:

Leave A Comment

Line and paragraph breaks automatic, email address never displayed. Some HTML allowed.