IE8/9 - Maximum bytes for CSS file

Question

The application I am currently working on has excessive CSS styling and we seemed to have reached some sort of limitation with IE8/9 and how much CSS it can load. At some point it stops interpreting the CSS therefore breaking style on some pages. We are using Combres to compress/minify the files which is causing such large CSS files. This seems to happen in the 400KB-450KB range (Yes, I know that is way too much for any CSS).

So my question: What is the maximum size for a single CSS file in IE?

Also would enabling GZIP compression help? IIS has dynamic/static compression enabled and it seems to work in Chrome but not IE.

Answer 1

I came across this problem, and thought, really?? Anyway the solution is deceptively simple, use blessc from Paul Young http://blesscss.com/
Thanks Paul!

Answer 2

For IE up to IE9 the css file size is max 288kb

Answer 3

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.

Answer 4

I use Gulp-sakugawa, but you still must construct a css file to @import the other files you have just generated. https://www.npmjs.com/package/gulp-sakugawa

My problem with Bless is that it still was splitting files to 300k and that is still too large.