Question

或者这仅仅是个人喜好的事情？我得到的是，使用这两种方法有什么特别的好处吗？

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

与

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

Answer 1

根据雅虎的Best Practices for Speeding Up Your Web Site，请始终使用<link>代替@import。有关详细信息，请参阅this blog post。

在IE中（在6,7和8上测试），@import 使样式表成为顺序下载。下载并行资源是关键更快的页面。这种行为在IE中导致页面花费更长的时间完成。

使用<link>允许浏览器打开其他连接，从而减少加载时间。

Answer 2

短版？旧版浏览器不支持@import，在某些情况下，某些常用浏览器存在问题（IE6 和 IE7），在不同浏览器工作时可能会有不同的表现，并且没有任何优势超过<link>。

长版？您想使用<link>，但有几种情况（现在大多不相关），使用@import是有道理的。来自What's the Difference Between @import and link for CSS?：

使用的最常见原因 @import代替（或同时）是因为旧的浏览器没有认识@import，所以你可以隐藏来自他们的风格。

那是在谈论隐藏IE4的东西，这就是为什么我说“大多数不相关”。其中一个案例隐藏了IE6的内容，但最好用Conditional comments完成。

更现代（和相关）的比较是Using the CSS @import Rule：

nternet Explorer（你知道它会来的最终起来）并不妥协指定媒体类型 - 它会窒息。基本上，IE（版本4-7）尝试阅读媒体类型，就像它的一部分一样文件名，导致整个事情要崩溃了。因此，如果你不想让你的CSS有一个默认媒体类型为“全部”，你是可能最好使用一个标签和组合导入 - 指定媒体类型你的链接，然后导入你文件中适当的CSS 链接到。我还没有听说过IE8 遇到同样的问题（如果你碰巧知道，请赐教评论！）。

另一个来源是雅虎的Best Practices for Speeding Up Your Web Site：

以前的最佳做法之一   说CSS应该在顶部   为了允许进步   渲染。

在IE @import中的行为与...相同   在底部使用   页面，所以最好不要使用它。

但确实解释原因（因此以前的链接）。

使用链接标记或样式标记导入CSS更好吗？

2 个答案: