Dreaded 31 style/link tags limit in IE 8/9

I lost lot of hairs while debugging a rich webpage in IE 9, by rich i mean having lot of js and css. In development mode, the scripts and css are not minified and combined into a single js, css file. Yeah, so my page had around 35 to 40 links and style tags.

I tested in chrome/FF and things worked like charm, but as soon as i opened the page on IE, i was surprised to see some portion of the page was unstyled. I kept on wondering/debugging to figure out why it was happening?
After 30-40 minutes of all sorts of debugging including brute-force approach, i found out what i call is "Dreaded 31 link/style tags limit in IE 8/9".

What is it?

IE 8/9 has a limitation due to which it only allows 31 stylesheets (link/style) tags in a page. If you have more tags than 31 then IE silently ignores all the rules included in those tags.

Workaround

We can workaround the issue by grouping css files using the @import method. @import allows us to include external stylesheets in our document.

<style type="text/css">
  @import url("A.css");
  @import url "B.css";
</style>

Breather

Fortunately IE-10 does not have this issue and it allows developers to use as many link tags as they want.

More Information

• IE 8/9 Limitation