【问题标题】:Difference between @import and link in CSSCSS中@import和link的区别
【发布时间】:2010-11-04 14:15:52
【问题描述】:

我正在学习一些 CSS 来调整我的项目模板。我遇到了这个问题,并没有在网上找到明确的答案。在 CSS 中使用 @import 和 link 有区别吗?

@import 的使用

<style>@import url(Path To stylesheet.css)</style>

链接的使用

<link rel="stylesheet" href="Path To stylesheet.css">

最好的方法是什么?为什么? 谢谢!

【问题讨论】:

    标签: css import hyperlink


    【解决方案1】:

    当我使用@import 规则时,通常是在现有样式表中导入样式表(尽管我不喜欢一开始就这样做)。但是要回答您的问题,不,我认为没有任何区别。只需确保将 URL 放在双引号中以符合有效的 XHTML。

    【讨论】:

      【解决方案2】:

      今天没有真正的区别,但旧浏览器(Netscape 4 等)无法正确处理 @import,因此可以使用 @import hack 对这些旧浏览器隐藏 CSS 2 规则。

      同样,除非您支持非常旧的浏览器,否则没有区别。

      不过,如果我是你,我会在你的 HTML 页面上使用 &lt;link&gt; 变体,因为它允许你指定媒体类型(打印、屏幕等)等内容。

      【讨论】:

      • @import 语句也可以指定媒体。
      • 真的吗?我想你可以在你的风格标签上放一个媒体类型,但这对我来说有点像 hack。
      • 你可以做例如“@import url(style.css) screen, print”,虽然IE7及之前不支持媒体类型。
      【解决方案3】:

      您可以使用 import 命令在 css 文件中导入另一个 CSS,而 link 命令无法做到这一点。真正的旧浏览器无法(部分 IE4、IE5)处理导入功能。此外,一些解析 xhtml/html 的库可能无法导入样式表。请注意,您的导入应位于所有其他 CSS 声明之前。

      【讨论】:

        【解决方案4】:

        理论上,它们之间的唯一区别是@import 是包含样式表的CSS 机制,而&lt;link&gt; 是HTML 机制。但是,浏览器对它们的处理方式不同,这使&lt;link&gt; 在性能方面具有明显优势。

        Steve Souders 写了一篇博文,比较了名为“don’t use @import”的&lt;link&gt;@import(以及它们的各种组合)的影响。这个标题几乎不言自明。

        雅虎!还提到它是他们的性能最佳实践之一(由 Steve Souders 合着):Choose &lt;link&gt; over @import

        此外,使用&lt;link&gt; 标签可以定义"preferred" and alternate stylesheets@import 无法做到这一点。

        【讨论】:

        • 谢谢 - 不错的超链接 - 尤其是第一个。
        • 这是2009年写的,不知有没有更新
        【解决方案5】:

        @import 通常用于外部样式表,而不是像您的示例中那样内联。如果您真的想对非常旧的浏览器隐藏样式表,您可以将其用作防止他们使用该样式表的技巧。

        总体而言,&lt;link&gt; 标记的处理速度比 @import 规则更快(就 css 处理引擎而言,这显然有点慢)。

        【讨论】:

          【解决方案6】:

          【讨论】:

          • Quote: “假设我们有一个 1000 页的网站,我们从网站上的每个页面链接到一个 CSS 文件。现在让我们假设我们想要向所有这些页面添加第二个 CSS 文件。我们可以编辑所有 1000 个 HTML 文件并添加第二个 CSS 链接,或者更好的方法是从第一个文件中导入第二个 CSS 文件。我们只是节省了很多小时的工作!”
          【解决方案7】:

          指令可以允许异步加载和解释多个 css。

          @import 指令强制浏览器* 等到导入的脚本被内联加载到父脚本之前,它的引擎才能正确处理它,因为从技术上讲,它只是一个脚本。

          许多 css 最小化脚本(以及诸如 less 或 sass 之类的语言)会自动将链接的脚本连接到主脚本中,因为它最终会减少传输开销。

          *(取决于浏览器)

          【讨论】:

            【解决方案8】:

            Microsoft Internet Explorer 9 (MSIE9) 似乎无法正确处理 @import。从我的 Apache 日志中观察这些条目(IP 地址隐藏,但 whois 说它归微软自己所有):链接到 screen.css 的主要 HTML 有

            @import url("print.css") print;
            @import url("speech.css") aural;
            

            我现在将其更改为 HTML 中的 link 元素,因为似乎 MSIE9 向服务器发出了两个不正确的请求,得到了我可以不用的 404 错误:

            [ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
            [ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
            [ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
            

            之后对这些文件有适当的请求,但我们可以不用这种“先在服务器上拍摄,然后解析url”的逻辑。

            【讨论】:

              【解决方案9】:

              一个html,另一个css代码 如果您没有使用过鞍 html 标签,那么您需要使用 @import

              【讨论】:

                猜你喜欢
                • 2017-04-20
                • 2016-10-05
                • 2012-09-23
                • 1970-01-01
                • 2015-02-15
                • 2013-11-09
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多