@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
分享到:
相关推荐
CSS——Cascading Style Sheets 层叠样式表 作用 定义了HTML元素怎样去显示 一般存储在样式表中 也可以存储在外部样式文件.css文件中
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常...
Cascading Style Sheets: Designing for the Web, Third Edition By Håkon Wium Lie, Bert Bos ............................................... Publisher: Addison Wesley Professional Pub Date: April...
closure-stylesheets, lints,优化和 i18n izes的CSS transpiler 关闭样式表闭包样式表是对CSS的扩展,它向标准 CSS conditionals conditionals conditionals conditionals conditionals conditionals conditionals
10 Minute Guide to HTML Style Sheets
为了解决这个问题,人们也走了不少弯路,用了一些不好的方法,比如给HTML增加很多的属性结果将代码变得很臃肿,将文本变成图片,过多利用Table来排版,用空白的图片表示白色的空间等。直到CSS出现。
Håkon Wium Lie关于样式的著作
Cascading Style Sheets 2.0 Programmer's Reference by Eric Meyer
Professional CSS Cascading Style Sheets for Web Design
Using a standardized approach to CSS in an example-packed, step-by-step format, this comprehensive introduction clearly shows you how to combine CSS with HTML, XHTML, or XML to create rich, ...
Using a standardized approach to CSS in an example-packed, step-by-step format, this comprehensive introduction clearly shows you how to combine CSS with HTML, XHTML, or XML to create rich, ...
CSS Refactoring Architect Your Stylesheets for Success .pdf 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络,如有侵权,请联系上传...
Cascading Style Sheets for Web Design Second Edition
Cascading Style Sheets for Web Design Second Edition Psrt2
#Stylesheets是社区生成的最佳CSS资源的集合。 创建它是为了让Web设计社区可以共享和分类所有可以找到的最佳工具,教程,代码片段和存储库。 您可以发布与CSS相关的任何内容,并让社区“加注星标”,以使其他人知道...
matplotlib-stylesheets:Matplotlib的样式表
Beginning CSS: Cascading Style Sheets for Web Design, Second Edition
world wide web万维网英文课件:ch03-Cascading Style Sheets.ppt
层叠样式表 (Cascading Style Sheets) CSS可以用来为网页创建样式表,通过样式表可以对网页进行装饰。 所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。 而css就可以分别为网页的各个...
首先,请确保您已经创建了Rails应用程序 rails new APP_NAME ... rm -rf app/assets/stylesheets curl -L https://github.com/ubi-legal-innovation-team/rails-stylesheets/archive/master.zip > styleshee