使用链接标签还是样式标签导入CSS更好？

Question

还是只是个人偏好？我的意思是，使用这两种方法是否有具体的益处？

<link href="main.css" rel="stylesheet" type="text/css">

对比

<style type="text/css">
@import url('main.css');
</style>

- Iain Fraser

Answer 1

根据雅虎的网站加速最佳实践, 总是使用<link>而不是@import. 更详细的信息在这篇博客文章中可用。

在IE中(测试过6、7和8), @import会导致样式表按顺序下载, 并行下载资源是加速页面的关键. 在IE中这种行为导致页面花费更长时间才能完成.

使用<link>允许浏览器打开额外的连接, 从而减少加载时间。

- William Brendel

---

那个答案对我来说更有意义。 - MaxiWheat

此外，Internet Explorer 5及以下版本根本不会解析@import - 这是一些旧的hack使用的额外规则定义。 - SuperRoach

Answer 2

简短版？在旧浏览器中不支持@import，在某些情况下与常用浏览器（IE6和IE7）存在问题，在它起作用时在不同的浏览器中可能会有不同的行为，并且没有比<link>更多的优势。

长版？你想使用<link>，但有几种情况（现在大多数已经不相关了）使用@import是有意义的。来自@import和CSS链接之间有什么区别？：

最常给出使用@import而不是（或与）链接的原因是，旧浏览器无法识别@import，因此您可以将样式从它们那里隐藏起来。

这是在谈论如何隐藏IE4的内容，这就是我说“大多数不相关”的原因。其中一种情况是隐藏IE6的内容，但最好使用条件注释。

一个更现代（也更相关）的比较在使用CSS @import规则中：

Internet Explorer（你肯定会提到它）无法很好地处理指定媒体类型的问题 - 它会出现错误。基本上，IE（版本4-7）尝试像文件名的一部分一样读取媒体类型，导致整个文件崩溃。因此，如果您不希望CSS具有“all”默认媒体类型，则最好在链接中使用组合标签和导入 - 指定链接中的媒体类型，然后在链接到的文件中导入相应的CSS。我还没有听说IE8是否存在这个问题（如果您知道，请在评论中告诉我！）。

另一个来源是Yahoo的加速网站的最佳实践：

其中一个之前的最佳实践指出，应该将CSS放在顶部以允许渐进式呈现。

在IE中，@import与在页面底部使用相同，因此最好不要使用它。

但是并没有真正解释为什么（因此有了先前的链接）。

- cletus

---

实际上，问题发生在您使用多个CSS文件时。如果您在CSS文件内部使用@import，则当使用<link>标签时，会导致IE按顺序下载CSS文件而不是并行下载。并行下载更快，因为两个或多个文件同时进行下载。这里有更多的解释：http://stevesouders.com/blog/2009/04/09/dont-use-import/ - MaxiWheat

你说得对，strager。如果你在@import时省略了换行符，那么两者在html文档大小方面是完全相同的。你可以通过在主css文档中创建链接或@import来实现收益，在其中@import其余的css。Cletus，看起来你部分正确，@import会导致浏览器按顺序下载CSS，而不是并行下载。我认为缓存实际上不是问题（不再是问题了？）。 - Iain Fraser