1

After reading Internet Explorer's CSS rules limits, it appears that Internet Explorer will only load 31 style sheets and each one must contain less than 4095 rules.

Do other browsers and different versions have rules like this, if so what are they? Also are there any other similar rules, like for scripts or html page size?

Thanks

Community
  • 1
  • 1
Garrett Fogerlie
  • 4,450
  • 3
  • 37
  • 56
  • 1
    What could possibly warrant so many css rules?! Also I suppose I might as well be constructive as well as curious...why are you attempting to load more than 31 stylesheets at one time? You can theoretically have an infinite number of sheets so long as you dynamically load them. – Mike H. Oct 02 '12 at 02:21
  • 2
    If you need to ask, you're definitely doing something wrong ;) IMHO (I pity the poor user who tries to load a web page with that CSS!) – paulsm4 Oct 02 '12 at 02:22
  • @paulsm4 I don't have any issue with it, just saw this http://stackoverflow.com/q/12673646/985284 and it was something I didn't know so I would like to know what other limits there are, and is this only an IE issue. – Garrett Fogerlie Oct 02 '12 at 02:24
  • @MikeHometchko I just want to know, I don't have a problem. Also, according to http://stackoverflow.com/a/1184960/985284 and http://msdn.microsoft.com/en-us/library/ms531194%28VS.85%29.aspx it seems you still can only have 31, even if you dynamically load them. – Garrett Fogerlie Oct 02 '12 at 02:28
  • 2
    @Mike 640K ought to be enough for anyone, right? ;-) – deceze Oct 02 '12 at 02:45
  • gotcha. it is intriguing I agree. I never really thought to consider the potential limits as I cant see a reason to ever have more than a few sheets. I must say the apparent dynamic limitation is puzzling to me and I'll definitely put that to the test. – Mike H. Oct 02 '12 at 02:47
  • sorry didnt mean to post that last one as an answer, repost in comment section: @Garrett evidently the array that index's each stylesheet object created using createStyleSheet() is only capable of storing 31 objects, however the MSDN does also quote "to create additional objects, use createElement and append them to the HEAD of the document." Like I said before I think I'll put this debate to the test shortly ALSO: apparently you can use the CSS import feature to import up to 31 stylesheets per stylesheet which boosts the "hard-limit" to 961 – Mike H. Oct 02 '12 at 03:04
  • @MikeHometchko wow up to 961, that's a ton. Let me know how it turns out when you test them. – Garrett Fogerlie Oct 02 '12 at 03:33

1 Answers1

2

It would appear that this is indeed an outdated mechanic, however true. I wrote a really quick program to create 35 stylesheets with 4500 classes each with 1 css attribute. I then dynamically created links to these stylesheets with a quick little script:

$(document).ready(function() {
try
  {
    for(var i = 0; i<35; i++)
    {
        var el = document.createElement("link");
        el.type = "text/css";
        el.rel = "stylesheet";
        el.href = "style" + i + ".css";
        document.getElementsByTagName("head")[0].appendChild(el);
    }
  }
catch(e)
  {
      alert(e);
  }
});

This works fine in both Chrome and IE9 with no errors thrown. I then tested the same number of sheets in IE9 with the MSDN's reference to createStyleSheet, replacing the code inside the for loop with this:

document.createStyleSheet("style" + i + ".css");

Which did indeed throw an insufficient storage error. I'll also note this function ONLY works in IE, trying to run this script in Chrome threw an unkown object error of type "createStyleSheet".

Heres a working version of the code: http://fluidev.com/cssMax/test.html

Mike H.
  • 1,731
  • 9
  • 31