IE浏览器stylesheets加载资源限制问题

阅读更多

@import url（）做一下总结：

1：@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。

2：@import 是css2里面的，所以古老的ie5不支持。

3：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

4：link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

@import url(xxx.css); 有最大次数的限制，经测试IE6的最大次数是31次，第32个import及
虽然最多只能import 31次，但不会影响css里面的其他规则，如body{}的定义还能正常显示。
Firefox 没有发现有import的最大值。

引用

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.

http://stackoverflow.com/questions/3211991/does-ie-8-have-a-limit-on-number-of-stylesheets-per-page
http://blogs.telerik.com/aspnetmvcteam/posts/10-05-03/internet-explorer-css-limits.aspx