You always have to worry about supporting some of those legacy browsers. Nothing is worse than pesky ol’ IE. It has gotten better now… a bit. In the latest project I have worked on we are supporting IE9+ and the “other browsers” (because they just work).

We set out to make a nice change in our application to increase modularity and break down our CSS files (actually using LESS), into very small chunks each related to their own script component and template. This means you can make a style change knowing you are not going to touch anything other than that component (it is not shared, etc). This is a pretty standard practice nowadays and simplifies testing greatly… and all around I feel a lot better about making more drastic changes at this level of granularity. Once our application hits release mode, everything is automatically bundled and minified so we don’t need to worry about loading 40 individual style sheets from the client.

THEN ALL OF A SUDDEN -> QA finds an issue. The entirety of the site is basically unusable in IE9. We hunted everywhere thinking there was an error in a global script component, but with no actual JavaScript Console Error (which was very confusing for us). Further investigation led us to find that the functionality all worked in IE9 still, but the styles were completely messed up. We then found that IE9 has a limitation on the maximum number of style sheets that can be loaded to a document (which I knew was there, but had no idea it was this low). 31 maximum style sheets for IE9. Of course the site continued to work in Release mode (when bundled), but it is so very nice in development to not bundle and have the developer tools tell you the exact file and location a particular style came from. This was a little harder to find that one would think basically because the browser does not give you an indication (in developer tools or otherwise) that it has hit the maximum. It simply just stops parsing and applying the styles to the DOM. This means it could have any number of effects on your site based on your application and order of adding sheets.

This is something that you should definitely be aware of in case it ever bites you!

See this and more limitations on maximum number of CSS rules here:

http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx