Is There a CSS File Size Limit in IE9

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 a CSS file size limit in IE9?

After extensive testing and research, I have to conclude that no such limit exists for IE9. Why there are many rumors on the internet about it, I have no clue, but I could not find any official documentation of the fact. Any suggestion of this fact has just been unsupported Stack Overflow comments or random blog posts. After making my own CSS that was over 288KB, and seeing it successfully load all rules, I don't see how this limit could exist. It's possible these people were hitting the selector limit, but I can't investigate further as there are no files that exist that are over 288KB, don't hit the selector limit, and are purported to not fully load in IE9. I hope future developers can see this question, and not waste as much time on this random IE9 tidbit as I have.

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

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.

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.

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.

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.

IE9 does not load css fully

Bit late but for future visitors of this thread: I had the same problem and found out my project just had gotten too big. IE9 stops reading your stylesheet after 4095 selectors.

For reference: Does IE9 have a file size limit for CSS?