1

Possible Duplicate:
is there any limit on css file size?

I have a generated CSS file coming from a third party application of around 60K lines with ~ 13K classes defined in that. I cannot change the generated CSS file by any means on the server (when it is generated from the third-party application) and the way it is injected in different HTML files on GET requests.

My target browser for the application is IE9 and it so happens that IE9 is failing to parse more than 4095 classes coming from one file and hence doesn't get the classes defined after that. Also, this number has been exact while debugging the generated file I have and another test file which I created (gist below) to verify this number.

Is there any workaround possible or am I missing any detail here ?

Illustration:
To give a quick way to reproduce this problem, here is a link to a gist that I have created. Just extract all the files in some folder and open ie9_test.html in IE9

https://gist.github.com/3941331

I couldn't find any service to show the output online where an IE9 environment is present. My IE9 build is 9.0.8112.16421

EDIT: The test files and my files work fine on chrome v22

Community
  • 1
  • 1
Kumar Devvrat
  • 78
  • 5
  • Is it just me or is that a *lot* of classes in a CSS file? – John Oct 23 '12 at 20:58
  • 2
    @John No that is a completely insane amount. Especially in one file. Thats the one css class to rule them all style. – thatidiotguy Oct 23 '12 at 20:59
  • I wish I could change that way that CSS file is generated by the third-party application on which I am dependent. Basically, that CSS files is mother of all CSS classes that are required in the application. – Kumar Devvrat Oct 23 '12 at 21:03
  • 1
    Take a look at the code he supplied, it's insane... .ie9_css_element_id1 through .ie9_css_element_id7999 ALL text-align:center. Make this third party application go away it was written by chimps. – Rick Calder Oct 23 '12 at 21:07
  • @RickCalder - That isn't the actual code. "To give a quick way to reproduce this problem, here is a link to a gist that I have created. " – Martin Smith Oct 23 '12 at 21:09
  • If others can reproduce it as well then I will file it as a bug for IE9 – Kumar Devvrat Oct 23 '12 at 21:23
  • @kumardevvrat - `4096` is `2^12`. According to [the answer here](http://stackoverflow.com/a/3211946/73226) this has been a long standing limit. Presumably there isn't much demand for raising it. – Martin Smith Oct 23 '12 at 21:29
  • 1
    @kumardevvrat - don't bother filing a bug; MS are well aware of it, it's a long standing limit. They're unlikely to fix it either -- as others have said, no-one needs that many styles, so MS will feel perfectly justified with having the limit there. What I want to know is how this third party app is getting away with having code like that? Surely their other users must have hit this limit as well? – Spudley Oct 23 '12 at 21:42
  • @MartinSmith - Thanks for pointing that out. So indeed it is a limitiation – Kumar Devvrat Oct 23 '12 at 21:48
  • @Spudley - I can imagine if there are few uses cases for extending that limit because then it is an indicative of bad design in the first place. The app is essentially about workflow development which has different steps and corresponding forms in the UI. Now all these forms have numerous labels/fields with veyr minute level of customization. Now all these styles for all the elements across all the forms are pushed to one file. Sadly, elements having no custom styles have their predefined CSS classes also being pushed for eg: .input_element_id1 {} which are essentially useless. – Kumar Devvrat Oct 23 '12 at 21:54
  • @MartinSmith - I had thought of the interesting limit of 4096 CSS rules given it's power of 2 but it was not safe to assume a hard-coded limit on my own. – Kumar Devvrat Oct 23 '12 at 21:57
  • Here's a JS Fiddle demonstrating the above - http://jsfiddle.net/wrumsby/S8kVC/ - n.b. you need to run this in IE9, not IE10 emulating IE9 to see the problem. – Walter Rumsby Mar 19 '13 at 21:58

1 Answers1

1

Well one obvious workaround would be to break it up yourself into two or more files. You could then include both on the relvant pages. You would just have to write a simple css parser to identify where to cut up the file. And by simple I mean just find where classes start and begin so you know where to chop chop.

thatidiotguy
  • 8,701
  • 13
  • 60
  • 105