Internet Explorer imposes a maximum limit of 32 individual styleSheet.

Question

Hello everyone,
                  I have a rich web page which has more than 32 CSS files imported in my .aspx page. It works fine and shows all the CSS effects in firefox / IE +windows XP. However it does not works in IE + vista. CSS files were ignored after 32 count and CSS after 32 counts were ignored.
                 I have googled for the problem and find some of the blogs that were telling this as a IE limitations Internet Explorer restricts you to a maximum of 32 @import statements in your CSS file."

See below forum
http://www.agum.com/web/2008/03/11/internet-explorer-issue-maximum-of-32-css-import/
http://joshua.perina.com/africa/gambia/fajara/post/2008/1/25/internet-explorer-css-file-size-limit


Any help?

Answer 1

Hi there,

 

You are correct; there is a limit of 31 CSS files in a given page.  If you need more, use multiple pages to import them.  For example, if you need 60 CSS files, create one file to import the first 30 and a second file to import the next 30.

 

You may also want to take another look at the design of your site and ask yourself why you need so many CSS files.  After all, each import requires a certain amount of time to load.  It's worth thinking about, at any rate.

 

In any event, I hope this helps...

 

-- Lance

 

Answer 2

While I am developing my site I am using ~40 CSS files to clearly partition the CSS used by the different pages and controls; I find this very helpful and believe it to be a legitimate -- nay, wise -- use of such a number.

You may want to take another look at the design of your web browser and ask why it is silently breaking standards-compliant web sites; after all, each bug takes a certain amount of time to fix. It's worth thinking about, at any rate. Is there a performance issue being addressed by the 31 import limit?

Regards,

Alex

Answer 3

Hi Alex,

 

Thanks for your feedback.  I can't speak to the specific logic behind any given design decision; however, you should be able to load each of your stylesheets if you load them in groups.  (This may help mitigate the performance hit of 40 separate HTTP requests, though I can't swear to that without trying it myself).

 

In any event, I'll forward your feedback to the product team and we'll see what happens.  For best visibility, please consider posting your concerns to the Internet Explorer Beta newsgroup, which is actively seeking feedback for IE8 Beta 2.

 

Hope this helps...

 

-- Lance

 

 

 

 

Answer 4

That's 40 requests your users have to make to view each page.  That's a bunch of extra data your servers have to serve up.  You may want to consider only doing that during development and merging them into a single file when you publish.  

Answer 5

Lance, thanks for forwarding on my feedback. I will consider posting in the IE8 beta forum. I'm not entirely sure I know what you mean by loading my stylesheets in groups; do you mean hiding print, screenreader etc. stylesheets for regular requests?

 

jeffdav, of course I intend to merge the files when the site is published. However, you would be surprised how low the performance impact is as measured during testing; also, there is almost no impact after the first page load, as everything is set to be cached.

 

Regards,

 

Alex

Answer 6

Alex,

 

By "loading your stylesheets in groups," I mean creating separate stylesheets to load groups of your current stylesheets.  You mentioned 40 stylesheets in your original message.  To load them in groups, you might create a group1 stylesheet to load the first 20 and a group2 stylesheet to load the other 20. 

 

The limitation is 31 load reqeusts per stylesheet.  So, there is an an upper limit, but it's larger than 31.  i wouldn't try testing the upper limit, though, I'm fairly certain you'd notice a performance impact.  :-)

 

Hope this helps...

 

-- Lance

 

Answer 7

I am using IE8 and the developer tools that come with it.

Couple issues with this.

1.  There needs to be an error message when CSS files are ignored for being over the limit.  Just failing to load them and not saying anything is a pain.
2.  There ought to be an optional override that a developer like myself can set to allow unlimited css includes for development and debugging purposes.

I'm authoring a site, and I use separate css files for every component during debug.  Before pushing to release, I merge all css files into one big compressed file.  Every browser works fine, but now I have problems with IE.  It wasted 4 of my hours just to figure out the problem since IE silently ignores the includes without so much as a warning.

-Kris

Answer 8

(Warning... incoming rant)

Um, does anyone else think that this 31 CSS file limit is effing RETARDED? Congratulations, Microsoft -- I honestly didn't think I could hate IE any more than I did before this cluster. Wow. I mean seriously? Let people screw their sites up with unnecessarily long lists of CSS files if they want -- it's better than breaking the site all together by not loading loading them, right?

Funny, Firefox doesn't have this issue.

Answer 9

Why this is limited it to 31? why not 30, 29, 28 ... If 32 CSS files are bad for a page then definitely 31 is also bad. I can't understand, how an MS developer can write such a ridiculous logic. I just lost my 3/4 hours for this issue. And I'm sure many drupal programmers face this problem and lose their valuable time.

Answer 10

This really is really a bogus and silly limitation that needs to be changed.

Answer 11

Hi Hiren,

    As you've mention in your post, it is a know issue that IE has a limit of 32 stylesheets per CSS file.

    It is a great idea to have multiple stylesheets for easy development and maintenance.

    But it is not a great idea to serve multiple stylesheets to the user in the production site, as there is a limit on number of simultaneous HTTP connections that a browser can make to a single domain. The numbers are,

    

Browser	No. of simultaneous connections
IE 6 & 7	2
IE 8	6
Firefox 2	2
Firefox 3+	6
Opera 9.26+	4
Safari 3+	4

Which means your site's user has to wait for a long time for all the stylesheets, plus the images and javascript files to be downloaded.

It's better and a good practice to combine stylesheets into one file, either everything or grouping them together (eg. page based, module based etc.) so that your site's pages load faster and the user's experience gets better.

Answer 12

Sorry to be slightly offensive - how is it possible this bug was reported over two years ago and still it's not fixed in IE8?

The pros and cons are irrelevant - as well as each of them is ridiculos to some extent. Modern web servers (maybe even IIS?) use something called keepalive so one connection gets re-used, secondly when you're developping a web site it's not about the performance hit the user takes, but sake simplicity of debugging.

You're seriously suggesting that *everyone* ought to change their way of doing CSS just because some braindead decision was made. Good luck to MS - let's hope Google keeps pushing Chrome and MS out of the browser market.

 

Two years....

Answer 13

ref: https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support

<q>

Limit the use of vendor/version specific features

Authoring content which is standards compliant is the easiest way to support the widest range of user agents and to decrease your maintenance costs. While it is not always possible to avoid vendor/version specific differences between browsers, the use of such features and the distinction between browsers based on vendor/version should be strictly limited to those areas where it is still required.

</q>

---

Rob^_^

Answer 14

Amazing, I'm baffled.

 

I'm using ASP.Net themes, in a HUGE website and the themes load all the files found in a theme folder, even if I do not need them. And IE gives me the limit. Why should I go into the hassle of merging files if I do not want to?

 

Answer 15

Yea Alex,

you can't make anything clear with an idiot system

they invent something not only usefulness it's harmful

Hope that someday the core of IE is copy paste from FF

Answer 16

(Warning... incoming rant)

Um, does anyone else think that this 31 CSS file limit is effing RETARDED? Congratulations, Microsoft -- I honestly didn't think I could hate IE any more than I did before this cluster. Wow. I mean seriously? Let people screw their sites up with unnecessarily long lists of CSS files if they want -- it's better than breaking the site all together by not loading loading them, right?

Funny, Firefox doesn't have this issue.

you can't compare a system that really understand (FF) to this product

Answer 17

I have been developing a front end for an extremely complex site using the telerik controls. we are trying to launch our demo and suddenly the IE CSS limitation has reared it's MUY FEO head. This is simply unbelievable. I have been a professional programmer for almost 2 decades and IE (with the once upon a time exception of Visual FoxPro) continues to be an unmitigated black hole for developer productivity in direct contradiction to their marketing hyperbole. Worse, this specific issue has not been addressed in IE9.

Think of all the wasted energy spent on these type of issues. We could have developed a cure for death, terraformed Mars, and been back for a big dance party if MSFT would drive for quality at all costs; and that boils down to INTENSE TESTING, and THINKING OUTSIDE THE BOX. 

From IE quirks to this CSS issue developers just burn irreplaceable manhours and expense. So VS 2010 comes out, "What will you do with it?" Windows comes out, "Where do you wanna go today?" BING comes out, "Blah blah" It does not end. ASP.NET, the easy way to build sites.... And so on & so forth. 

MSFT has done so many amazing things, but insulting the intelligence of developers should not be part of their repetoire. This is my 2nd day wrestling with this issue, and as always I will find a solution, but how do I do it, by ignoring their hyperbole, jumping on GOOGLE (not bing buddy boy) and praying to the god of all MSFT developer, none other than McGyver. 

Come on Microsoft, figure out a way to get past the white collar hoax, and treat your developers as the most precious asset in your arsenal. You will be rewarded exponentially with good will; any business' prime asset.

We all know how difficult and amazing your contribution to programming and the computer revolution is. Just be wise enough to know that the solutions to these kinds of issues are always in reach and just because you have the muscle to smash a square peg into a round hole doesn't mean it is a good use of your tools. 

Or as we say in Brooklyn, just cut the S#@($, there is a productivity revolution at hand and this kind of nonsense is really holding back world peace, cures for diseases, alternative energy sources and everything else that is worth staying up all night drinking coffee to achieve. You can do it if you really try.

 

 

 

Answer 18

CSS crunch? or http://www.minifycss.com/

I use Telerik also.... there is a lot of redundant/duplicated rules in their themes. They have (Telerik) already posted an issue ticket at connect.ms.com about the issue, but for me they can do alot more on their side and remove the duplication/redundancies in their style rules.

to get over the hurdle (I saw it comming when I first started using RAD Controls) I did not use any of their themes and separated external styleheets into layout and coloring.

Here is the external stylesheet block from my site Master Page.

  <%--Base Stylesheets--%>
  <link id="styLayout" rel="stylesheet" type="text/css" href="lib/Vista_Layout_c.css" media="screen,print" />
  <link id="styPrint" rel="stylesheet" type="text/css" href="lib/W3CPrint.css" media="print" />
  
  <%--Alternate Stylesheets--%>
  <link id="styIE" title="IE" rel="alternate stylesheet" type="text/css" disabled="disabled" href="lib/Vista_IE.css" media="screen" />
  <link id="styvistaHiContrast" title="Space" rel="alternate stylesheet" type="text/css" disabled="disabled" href="lib/Vista_Space.css" media="screen" />
  <link id="styvistaWallnut1" title="Wallnut" rel="alternate stylesheet" type="text/css" disabled="disabled" href="lib/Vista_Wallnut1.css" media="screen" />
  <link id="styvistaBrushedAL" title="Brushed Aluminium" rel="alternate stylesheet" type="text/css" disabled="disabled" href="lib/Vista_BrushedAL.css" media="screen" />
  <link id="styWindowsSys" title="Windows System" rel="alternate stylesheet" type="text/css" disabled="disabled" href="lib/Vista_System.css" media="screen" />
  <link id="styPreferred" title="MS Blue" rel="stylesheet" type="text/css" href="lib/MS_Blue.css" media="screen" />
  <link id="styvistaWaves" title="Waves" rel="alternate stylesheet" type="text/css" disabled="disabled" href="lib/Vista_Waves.css" media="screen" />
  <link id="styDesign" title="Design Mode" rel="alternate stylesheet" type="text/css" disabled="disabled" href="/stylesheets/DesignMode.css" media="screen" />
  <link id="stySnazzy" title="Snazzy" rel="alternate stylesheet" type="text/css" disabled="disabled" href="lib/Vista_Snazzy.css" media="screen" />
  <link id="styFluid" title="Fluid BW" rel="alternate stylesheet" type="text/css" disabled="disabled" href="lib/Vista_Fluid_BW.css" media="screen" />

 

Vista_Layout_c.css contains reset.css and size and positioning rules for all tags, Id's and telerik classes that I commonly use (RAD Grid, RAD PANEL, RAD Menu)

The alternate stylesheets contain color and background image rules, ONLY.

If I add a new Telerik control to a content page, then I will fist just append the <link> tag to the HEAD block from within the HEAD content holder in the content page.

Part of the Development process is to run CSSCrunch on each content page to see what common rules can be moved or combined with the stylesheets in the Master Page. You will see than many of the Telerik Themes style rules are duplicated.... ul's whether decendants of a RADGrid or RADPanel have the same color and background images rules, the Parent selector only differs.

Notice that by carefull use of the Media attribute you can reduce duplication of style rules...(I don't want colors and background images in the printed form as my site is information based (lists), so the Alternate stylesheets that do all the colors and background images only have screen for the media attribute.

I know what a peeve it is to waste time and effort following the wrong garden path..(I recognized early that Telerik Themes would eventually bloat my CSS rules). but you have reached the limits of your target browser... there are workarounds... that require additional effort.

One can always say in after-thought, that if you had taken the time in the first place (assuming you knew of IE's style rules limits) that you may have planned your pages differently to minimise duplication of style rules.

Whatever the browser, the more junk you feed it, the more likely it will choke.

but the biggest saving comes from NOT using the Telerik Themes

---

Rob^_^

Answer 19

This is the most stupid feature I've ever seen in IE... I lost a half day of work on that **** before figuring it out!

I was thinking "why is my CSS not loading?" and then, "maybe it loads only 32 CSS files?" so I counted my CSS files and I had actually 33 CSS files...

 

I hate IE...

 

PS : to microsoft developpers, man malloc, it should help for the future versions...

Answer 20

I think if you have more than 32 css files in a single page you have a serious design flaw. If you have a 50ms ping time that's 1,6 seconds just to load the css files. Use a script to combine them on build if you would like to keep them separated while developing.

Downloading a single 250kb css file will be much faster than downloading 32 4kb css files.

Answer 21

Stylesheet limits in Internet Explorer - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx (IEInternals Blog)

---

Rob^_^

Answer 22

Firstly....

I'd like to say yes, I completely agree with Alex on this. MS Devs are silently limiting the web developer's ability to code, however 'poorly designed' that code might be, it is still limiting us in our ability to code within ability of this codes standards. Browsers are supposed to fix our code errors by interpreting them better -OR- throw an error when you are doing something outside of the parameters of the standards. In this case, instead of letting web developers bash their heads against their desks for days on end trying to find out what the heck is going on with their code, IE should very clearly state on a pageload with 32+ CSS files being loaded, that there is a 31 CSS limit, and the rest have been subdued.

Secondly....

Why on earth would ANYONE need 32+ CSS files? I agree with Lance here on this one.

Answer 23

Now, in IE9 and almost 3 years after this "feature" was highlighted, this still seems to be a problem.

 

I've written an application that uses templates to render content - ready for pdf exporting. Each page can house many objects. Each object contains its own inline style. We do this as we want to ensure the style generated is bound (by unique ID to the object in question, and doesnt leak out to other objects).

As such, with 35 pages, and over 100 objects we have quite a few inline <style> tags.

I just thought I'd further this topic as it seems this "feature" is imposed with style tags too. I'm not sure if its a total of 32 style+cssdoc or 32 of each. But I do know, on the page where styling is ignored, is #32 (meaning the first 31 worked).

 

With a prime purpose of printing said report, lessening style tags is a cost that our client will need to pay, and they will see no benefit at all in the end result.

 

I think IE should also include a limit to <div> tags, a webpage surely doesnt need more than 31 div tags??! As we surely don't need a date past '99 .. 

Answer 24

Bug is alive and well....Jan 2012.  Nice work, Microsoft.

 

Firefox, Chrome, Safari -- all work fine with over 32 style sheets.  IE9 pukes all over the place.

 

No error messages, warnings, hints - nada - from IE9, Visual Studio 2010, my mother, the dog down the street.

 

Why would it occur to me that there was an imposed limitation when the other browsers handle the .CSS files just fine?

 

And there is a very good reason to have over 32 style sheets --  organization.  I can look at just the name of a stylesheet and I know what it is for.  Sure, you can have one REALLY BIG stylesheet and add comments for each section, but this is not as human friendly.  Plus, when you get into themes...the breakdown into many small .css files actually makes sense.  That way if you don't want to apply the styling, you just remove or alter ONE style sheet instead of having to go in and comment out the section.

 

 

Anyway -- MS should remove the limitation.

 

Everyone says this bug is well known.  Where is it documented online?

Answer 25

Yawn... please read the IEBlog. fixed in IE10 PP.

---

Rob^_^

Answer 26

Looks like Microsoft has an obsession or some sort of numerology reason with that number '32'. SQL Server (T-SQL) has a ridiculous recursion limit of 32 and Internet Explorer mysteriously blocks 32 style sheet files.

Hope Visual Studio or other IDE does not restrict 32 files at the same time or 32 projects in the same solution!!!!

Answer 27

DOH!

http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx

KB 262161 outlines the
maximum number of stylesheets and rules supported by Internet Explorer 6 to 9.

• A sheet may contain up to 4095 rules
• A sheet may @import up to 31 sheets
• @import nesting supports up to 4 levels deep

Some folks have wondered
about the math that underlies these numbers. The root of the limitations is that
Internet Explorer uses a 32bit integer to identify, sort, and apply the
cascading rules. The integer’s 32bits are split into five fields: four sheetIDs
of 5 bits each, and one 12bit ruleID. The 5 bit sheetIDs results in the 31
@import limit, and the 12 bit ruleID results in the 4095 rules-per-sheet
limitation. While these limits are entirely sufficient for most sites, there are
some sites (particularly when using frameworks and
controls)
that can encounter the limits, requiring workarounds.

There’s a simple test page for the limits here.

---

Rob^_^