CODEWITHSUNDEEP
cssinternet-explorercross-browserstylesheet
Garrett Fogerlie
Garrett Fogerlie

Reputation: 4458

What are the limits to the size and quantity of css files from browser to browser?

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

Upvotes: 1

Views: 150

Answers (1)

Mike H.
Mike H.

Reputation: 1751

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

Upvotes: 2

Related Questions