包含带有`<link />`或`@ import`的CSS - 哪个更好?

时间:2011-12-17 13:11:25

标签: css

我有一个网站,我有多个用于打印,电视,屏幕,手持设备等的CSS样式表...

我想知道哪种方法更适合使用(性能,可用性等......)

<link href="all.css" media="all" type="text/css" />
<link href="handheld.css" media="handheld" type="text/css" />
<link href="tv_print.css" media="tv, print" type="text/css" />

<style type="text/css">
    @import url("all.css") all;
    @import url("handheld.css") handheld;
    @import url("tv_print.css") tv, print;
</style>

谢谢

1 个答案:

答案 0 :(得分:20)

第一种方法(链接)是最好的。

主要原因是IE 6,7和8中存在一个错误(不确定大约9或更高)意味着当你将@import与链接结合使用时,文件是按顺序加载而不是并行加载。当使用多个样式表时,这会减慢很多事情。

仅使用系列中的@import下载,但订单无法保证,这意味着如果有重置,例如可能首先应用或不首先应用。

本文有一个很好的总结:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/