CSS CSS中@import和link的区别

Difference between @import and link in CSS

提问by Omar Abid

I'm learning some CSS to tweak my project template. I come to this problem and didn't find a clear answer on the web. Is there a difference between using @import or link in CSS?

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

Use of @import

使用@import

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

Use of Link

链接的使用

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

What's the best way to do it? and why? Thanks!

最好的方法是什么？为什么？谢谢！

回答by mercator

In theory, the only difference between them is that @importis the CSS mechanism to include a style sheet and <link>the HTML mechanism. However, browsers handle them differently, giving <link>a clear advantage in terms of performance.

理论上，它们之间的唯一区别是@import包含样式表的 CSS 机制和<link>HTML 机制。然而，浏览器以不同的方式处理它们，<link>在性能方面具有明显的优势。

Steve Souders wrote an extensive blog post comparing the impact of both <link>and @import(and all sorts of combinations of them) called "don't use @import". That title pretty much speaks for itself.

Steve Souders 写了一篇广泛的博客文章，比较了两者<link>和@import（以及它们的各种组合）的影响，称为“不要使用@import”。这个标题几乎不言而喻。

Yahoo! also mentions it as one of their performance best practices (co-authored by Steve Souders): Choose <link>over @import

雅虎！还提到它是他们的性能最佳实践之一（由 Steve Souders 合着）：选择<link>@import

Also, using the <link>tag allows you to define "preferred" and alternate stylesheets. You can't do that with @import.

此外，使用<link>标记允许您定义“首选”和替代样式表。你不能用@import.

回答by zenazn

No real difference today, but @importis not handled correctly by older browsers (Netscape 4, etc.), so the @importhackcan be used to hide CSS 2 rules from these old browsers.

今天没有真正的区别，但@import旧浏览器（Netscape 4 等）无法正确处理，因此可以使用@importhack来隐藏这些旧浏览器的 CSS 2 规则。

Again, unless you're supporting really old browsers, there isn't a difference.

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

If I were you, however, I'd use the <link>variant on your HTML pages, because it allows you to specify things like media type (print, screen, etc.).

但是，如果我是您，我会<link>在您的 HTML 页面上使用该变体，因为它允许您指定媒体类型（打印、屏幕等）等内容。

回答by merkuro

You can use the import command to import another CSS inside a css file which is not possible with the link command. Really old browser cannot (IE4, IE5 partially) handle the import functionality. Additionally some libraries parsing your xhtml/html could fail in getting the style sheet import. Please be aware that your import should come before all other CSS declarations.

您可以使用 import 命令在 css 文件中导入另一个 CSS，而使用 link 命令是不可能的。真正的旧浏览器无法（部分 IE4、IE5）处理导入功能。此外，一些解析 xhtml/html 的库可能无法获取样式表导入。请注意，您的导入应该在所有其他 CSS 声明之前。

回答by Ape-inago

The <link> directive can allow for multiple css be loaded and interpreted asyncronously.

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

the @import directive forces the browser* to wait until the imported script is loaded inline to the parent script before it can be correctly processed by it's engine, since technically it is just one script.

@import 指令强制浏览器* 等待，直到导入的脚本内联加载到父脚本中，然后才能由其引擎正确处理，因为从技术上讲，它只是一个脚本。

A lot of css minimization scripts (and languages like less or sass) will automatically concatenate linked scripts into the main script since it ends up causing less transfer overhead.

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

* (depends on the browser)

*（取决于浏览器）

回答by Matthew James Taylor

This article may be of use here: 4 methods of adding CSS to HTML: link, embed, inline and import

这篇文章可能对这里有用：将 CSS 添加到 HTML 的 4 种方法：链接、嵌入、内联和导入

回答by Gabriel Hurley

@import is generally meant to be used in an external stylesheet rather than inline like in your example. If you reallywanted to hide a stylesheet from very old browsers you could use that as a hack to prevent them from using that stylesheet. 

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

Overall, the <link>tag is processed more quickly than the @import rule (which is apparently somewhat slow as far as the css processing engine is concerned).

总的来说，<link>标签的处理速度比 @import 规则快（就 css 处理引擎而言，这显然有点慢）。

回答by Barry Gallagher

When I use the @import rule, it's generally to import a stylesheet within an existing stylesheet (although I dislike doing it to begin with). But to answer your question, no I don't believe there's any difference. Just make sure to put the URL in double quotes in order to comply with valid XHTML.

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

回答by Silas S. Brown

Microsoft Internet Explorer 9 (MSIE9) doesn't seem to handle @import properly. Observe these entries from my Apache log (IP address hidden but whoissaid it was owned by Microsoft itself): the main HTML linked to screen.css which had

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

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

which I am now about to change to linkelements in the HTML, because it seems MSIE9 issues two incorrect requests to the server, getting 404 errors I could do without:

我现在要更改为linkHTML 中的元素，因为似乎 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

There wereproper requests for these files afterwards, but we can do without this "shoot at server first, parse urlafter" logic.

还有人对这些文件正确的请求之后，但我们可以没有这个“拍在服务器首先，做解析url后”的逻辑。