Internet Explorer CSS limits

We all know that Internet Explorer has some bugs. Some of them can even bring down the entire rendering of your page. Like for instance the forced Standards mode crash bug in IE8, which can make your page to disappear completely if you have a floated container with max-height and overflow: scroll.

Two such bizarre bugs are these less known limitations in Internet Explorer - the 31 stylesheets per file and the 4095 selectors in a file.

Let’s first discuss the more widely known of the two -

31 stylesheets per file

If you are an ASP.NET developer and you develop mid-sized projects using App_Themes the chances are that you will hit this limit sooner than later. The problem is that App_Themes engine iterates through the skin folder and loads every CSS file kept in there regardless if it is needed or not. Every Internet Explorer version (including IE8 and unfortunately the IE9 preview released recently) on the other hand has the limit of loading only 31! stylesheets per file and thus fails to load all CSS files in a theme if they are more than 31. Another thing is that style tags in the HTML head or body are also counted as stylesheets (they are in fact parsed and created as different stylesheet objects) and are contributing to the problem - the more style tags you have, the less stylesheets you can include.

Unfortunately this bug is transferred to our RadControls as well. If you use a big number of RadControls and custom skins for them in a theme and just dump all the CSS files in it, you are in trouble.

Click here for a demo of a broken project which fails to load its CSS in all IE browsers. You can find the original project zipped at the end of this blog post.

There are several ways to fix the issue. One of them is to add a RadStyleSheetManager to your page - it has a stylesheet combining feature which is switched on by default and that will help you to partially reduce the number of loaded CSS files. However this method fixes the issue only to an extent (combines only the non-external skins) and may lead you to the second CSS limit in Internet Explorer which we will discuss soon enough.

Fortunately there is an alternative solution - it involves removing all the stylesheets from the App_Themes folder, moving them somewhere else within the site and creating there one or several CSS files in which you link the removed CSS files one by one using @import declarations.

Click here for a demo of a fixed site using the latter method. A zip with the original is awaiting you at the end of the article.

4095 selectors in a CSS file

A little less known limitation in all Internet Explorer browsers is the maximum number of possible selectors in a CSS file - 4095. This means that if you stumble upon the 31 stylesheets bug and decide to combine all your stylesheets to avoid it - at the end you will probably be in similar situation as in the beginning.

Unfortunately the only fix for this is splitting the file to several different CSS files and using the described above @import method to include them in your project.

Click here to see a test case of this bug or download the source below.

Download all test-cases as project here