代码之家  ›  专栏  ›  技术社区  ›  Iain Fraser

使用链接标记还是样式标记导入CSS更好?

  •  21
  • Iain Fraser  · 技术社区  · 16 年前

    还是只是个人喜好?我想说的是,使用这两种方法有什么特别的好处吗?

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

    对战

    <style type="text/css">
    @import url('main.css');
    </style>
    
    2 回复  |  直到 14 年前
        1
  •  22
  •   William Brendel    16 年前

    根据雅虎的 Best Practices for Speeding Up Your Web Site 永远使用 <link> 而不是 @import . 更多详细信息可在 this blog post .

    在IE中(在6、7和8上测试), @进口 使样式表 按顺序下载。下载 并行资源是 更快的页面。在IE中的这种行为 使页面花费较长时间 完成。

    使用 <链路& GT; 允许浏览器打开其他连接,从而减少加载时间。

        2
  •  10
  •   cletus    16 年前

    短版? @import 旧浏览器不支持,在某些情况下,某些常用浏览器存在问题(IE6 IE7),可以在不同的浏览器中工作时表现出不同的行为,并且不提供任何优于 <link> .

    长版?你想用 <链路& GT; 但是在使用 @进口 有道理。从 What's the Difference Between @import and link for CSS? :

    最常见的使用原因 @导入(或与一起导入) 是因为以前的浏览器没有 识别@import,以便隐藏 他们的风格。

    这就是为什么我说“大部分不相关”的原因。其中一个案例隐瞒了IE6的内容,但最好还是这样做。 Conditional comments .

    一个更现代(和相关)的比较 Using the CSS @import Rule :

    Internet Explorer(你知道它会来的) 最终)不能很好地处理 指定介质类型“IT阻塞”。 基本上,IE(版本4-7)尝试 阅读媒体类型就好像它是 文件名,导致整个 事情要崩溃了。像这样的, 如果您不希望您的CSS具有 默认媒体类型为__all,__you_re 最好使用 标签和 导入“指定媒体类型” 您的链接,然后导入 在文件中使用适当的CSS 链接到。我还没听说IE8 遭受同样的问题(如果你 正好知道,请你开导我 评论!).

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

    以前的最佳实践之一 声明CSS应位于顶部 为了允许进步 致使。

    在伊江 @进口 行为与 在 佩奇,所以最好不要使用它。

    但不 真的? 解释原因(因此前面的链接)。