Does Ie 8 Have a Limit on Number of Stylesheets Per Page

Does IE 8 have a limit on number of stylesheets per page?

Yes, IE8 (and even IE9 apparently) limit the number of style sheets to 31 per page.

Telerik has an article and test page which demonstrate the issue. According to comments in the same article, the 4096 rules per file limitation has been marked as Won't Fix in Microsoft Connect but I've been unable to verify that.

IE Question: How many CSS includes can it handle?

Internet Explorer has a maximum limit of 32 CSS file links. Definitely a browser issue. You'll need to think about consolidating your css requests.

Generally you can do this by concatenating them if they're static files, but if you're generating them programatically, you might have to look at a solution to manipulate the response before it gets passed to the browser.

We had to get around this issue for our enterprise ASP.Net project and ended up writing a "Css Multiplexor" that examined the response, found the requested CSS links, generated a web resource for one big css file, and output a link to that instead.

IE8/9 - Maximum bytes for CSS file

You are right with the file size being the issue (although there is also a maximum amount of selectors IE will parse). Compression won't help beyond the minification you are already doing, but splitting the CSS into two files will solve your problem.

All of the limitations are on a per-file basis. Consider separating out the CSS by feature set and only loading the CSS when needed.

Internet Explorer's CSS rules limits

Referring the following from Microsoft:

  • Stylesheet Limits in Internet Explorer
  • KB - A webpage that uses CSS styles does not render correctly in Internet Explorer

The rules for IE9 are:

  • A sheet may contain up to 4095 selectors (Demo)
  • A sheet may @import up to 31 sheets
  • @import nesting supports up to 4 levels deep

The rules for IE10 are:

  • A sheet may contain up to 65534 selectors
  • A sheet may @import up to 4095 sheets
  • @import nesting supports up to 4095 levels deep

Testing the 4095 rule by sheet limit

By way of confirmation, I've created a gist with 3 files. One HTML, and two CSS files.

  • The first file contains 4096 selectors and means that its final selector doesn't get read in.
  • The second file (4095.css) has one less selector, and gets read in, and works perfectly in IE (even though its already read another 4095 selectors from the previous file.

What's the size limit of css file for Internet Explorer?

Maximum number of possible selectors in a CSS file - 4095

http://demos.telerik.com/testcases/4095issues.html

31 stylesheets per file

http://demos.telerik.com/testcases/BrokenTheme.aspx

Does IE9 have a file size limit for CSS?

There are 3 limits:

  • a sheet may contain up to 4095 selectors, see
    http://demos.telerik.com/testcases/4095issues.html
  • a sheet may @import up to 31 sheets, see http://demos.telerik.com/testcases/BrokenTheme.aspx
  • @import nesting supports up to 4 levels deep

Microsoft support/MSDN reference links:

http://support.microsoft.com/kb/262161

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

is there any limit on css file size?

I think that if you are having problems with the size of your css files then it is time to rethink your styling strategy. The C in CSS stands for cascading. Quite often when CSS files get too big it is due to styles not being re-used where appropriate and through poor use of the cascading behaviour.

I don't say this lightly. I have worked on some large, complex retail sites and currently on very complicated financial trading applications. Whenever I have come accross sites with more than a few hundred styles, we have achieved large improvements in design, reductions in complexity and improvement of maintainability by reducing css complexity.

One place to start is doing a Google sesarch on css reset. There are multiple different implementations, but they generally follow the theme of overriding the differences in layout for each of the browsers and removing arbitrary borders, margins and padding etc. Starting with a clean slate, if you will. Then you can go ahead and build up your styles from there, being careful to make the most of cascading and css chaining

Chaining is where you have more than one class on an element. eg:

<div class="box right small"></div>  

box might have some general styles that you might like to apply to many block elements such as div, h1...h6, p, ul, li, table, blockquote, pre, form. small is self explanatory right might simply be aligned to the right, but with a right padding of 4px. Whatever. The point is that you can have multiple classes per element and build up the styling from reusable building blocks - groupings of individual style settings. Otherwise known as classes.

On a very simple level, look for oportunities to combine styles:

so:

h1 {font-family: tahoma, color:#333333; font-size:1.4em;}  
h2 {font-family: tahoma, color:#333333; font-size:1.2em;}
h3 {font-family: tahoma, color:#333333; font-size:1.0em;}

becomes

h1, h2, h3 {font-family: tahoma, color: #333}  
h1 {font-size:1.4em;}
h2 {font-size:1.2em;}
h3 {font-size:1.0em;}

Only, slightly smaller, but do this kind of thing lots of times and you can make a difference.

Also, Validate your css. This will help you spot errors in your code.

IE8 / IE9 does not load CSS

The problem you have is due to a limit that IE imposes on the number of stylesheets. IE can only load a maximum of 31 separate CSS files in a single page.

There are plenty of references for this one the web, but here's one from MSDN

This is a hard limit in IE. It is possible to load more CSS files than that by using specific techniques: if you use @import to load CSS files from inside others, it is possible to import up to 31 files for each of the 31 main CSS files. But it's not an ideal solution.

In general, it's better to reduce the number of files if possible -- each file that loads is a separate HTTP request, and having large numbers of requests can have a significant impact on page load performance.

My suggestion would be to try to combine the large number of CSS files you have into fewer files. This shouldn't be a difficult task, but there may be WP plugins you could use that would do this for you automatically if necessary.



Related Topics



Leave a reply



Submit