Internet Explorer limits nested @import CSS statements

I have been lately working on a collection of home-made widgets based on Dojo. This architecture has been designed to reuse elements and so there are widgets inside widgets, the code is arranged and structured, CSS is imported in a waterfall model, and everything should be fine and working properly.

Until Internet Explorer.

Let’s not talk about its mystic JavaScript errors, DOM random model interpretations and box model hacks. I had heard about the 32 @import CSS statements limit before (here, here and here), but what we were experiencing was different: beyond a given number of nested CSS imports, it seemed like stylesheets stopped being loaded. This was a big WTF the first time we spotted the problem, and blindly fixed it by adding twice the deeper @import sentences into the higher level CSS files. After all, it worked then.

But after a bad night of guilty conscience that issue came back to me, and I decided to do some tests on the issue so that some light be thrown on this dark matter. This was the plan: a simple HTML file with a number of divs (with a border and height definitions to make them visible by default), and a set of CSS files that where imported in waterfall mode, each one of them assigning the background color of one div according to its nesting level. The rupture point would be spotted where div’s started to look blank. Something like this:

The CSS files would look all like this one (style01.css):

@import url("style02.css");

.style01{
	background: #111;	
}

And so on (style02.css, etc):

@import url("style03.css");

.style02{
	background: #222;	
}

And up to 10 nested levels, in my test. What the result was? Every major modern browser (Firefox, Chrome, Opera, Safari) produced the expected result:

On the contrary, under Internet Explorer 8 and, moreover, 9, the result matched the little ‘panic moment’ we had when dealing with our nested collection of widgets:

Which actually confirmed that Internet Explorer limits nested @import CSS statements to three from the first linked external stylesheet. In the example, up to style04.css. In a production environment this is not a big deal since all CSS files are going to be packed into a single minified and compressed bundle, but it really can piss your day off in development environments should you not be aware of this behavior.

Once again, a reason to make me think of IE as a bad joke of a real browser.