将CSS与`<link>`或`@import`一起包含--哪个更好？

Question

我有一个网站，我有印刷，电视，屏幕，手持等多种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>

谢谢

Answer 1

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

主要原因是IE 6、7和8中有一个bug (不确定9或更高版本)，这意味着当您将@import与link一起使用时，文件是串行加载的，而不是并行加载的。当使用多个样式表时，这会大大降低速度。

只是连续使用@import下载，但不保证顺序，这意味着如果有一个重置，例如，这可能会或可能不会首先应用。

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