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

Question

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

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

与

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

Answer 1

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

在IE中(在6,7和8上测试),@import 导致样式表按顺序下载.并行下载资源是获得更快页面的关键.IE中的此行为导致页面花费更长的时间来完成.

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

Answer 2

精简版？@import在旧浏览器中不支持,在某些情况下,某些常见使用的浏览器(IE6 和 IE7)存在问题,当它工作时可以在不同的浏览器中表现不同,并且没有优势<link>.

长版？你想使用,<link>但有几个场景(现在大多数是不相关的)使用@import有意义.从@import到CSS的链接有什么区别？:

使用@import(或与之一起)使用的最常见原因是因为较旧的浏览器无法识别@import,因此您可以隐藏它们的样式.

那是在谈论隐藏IE4的东西,这就是为什么我说"大部分都是无关紧要的".其中一个案例隐藏了IE6中的内容,但最好使用条件注释.

更现代(和相关)的比较是使用CSS @import规则:

nternet Explorer(你知道它最终会出现)并不能很好地指定媒体类型 - 它会窒息.基本上,IE(版本4-7)尝试读取媒体类型,就像它是文件名的一部分一样,导致整个事情崩溃.因此,如果您不希望CSS的默认媒体类型为"all",那么最好使用标记和导入的组合 - 在链接中指定媒体类型,然后导入相应的您要链接到的文件中的CSS.我还没有听说过IE8是否会遇到同样的问题(如果你碰巧知道,请在评论中赐教我!).

另一个来源是雅虎加快您网站的最佳实践:

之前的最佳实践之一声明CSS应位于顶部以便允许渐进式渲染.

在IE中,@import行为与在页面底部使用的行为相同,因此最好不要使用它.

但并没有真正解释为什么(因此以前的链接).