8

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.

Morgan T.
  • 1,937
  • 1
  • 17
  • 20
  • 2
    I read somewhere that it's not the file size that matters, it's the number of rules. Supposedly the limit is 4096. (Found it: http://big-webowsky.meetpollux.com/2011/10/css-size-limit-in-internet-explorer-8/) – Mike Robinson Sep 20 '12 at 20:51
  • There's a limit on the number of selectors (4096), no byte size limit that I know of – Frederick Cheung Sep 20 '12 at 20:51
  • So 4096 is for a single file? e.g. if the 4097th was in a second CSS link it would work? Also any source referencing this would win you an answer ;) – Morgan T. Sep 20 '12 at 20:52
  • possible duplicate of [Does IE 8 have a limit on number of stylesheets per page?](http://stackoverflow.com/questions/3211991/does-ie-8-have-a-limit-on-number-of-stylesheets-per-page) – cweiske Apr 11 '13 at 13:23
  • I could not find any evidence for a filesize limit. See https://stackoverflow.com/questions/49683077/is-there-a-css-file-size-limit-in-ie9/49784811#49784811 – Arya Apr 11 '18 at 21:42

4 Answers4

5

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.

Matthew Darnell
  • 4,538
  • 2
  • 19
  • 29
  • 1
    From what I've read since yesterday, I have only seen that the # of selectors is the issue (4095 max). If there is a file size limit, what exactly is it and do you have any sources/testing to show/prove it? Thanks – Morgan T. Sep 21 '12 at 13:07
  • Here is an article someone else wrote about it: http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit. The only proof I have is that I have run into this issue multiple times at work and have had to solve it by splitting up files. – Matthew Darnell Sep 21 '12 at 16:47
5

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

Ram
  • 51
  • 1
  • 1
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!

pgee70
  • 3,707
  • 4
  • 35
  • 41
1

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.

CodePosse
  • 11
  • 3