@import和CSS中的链接之间的区别

118

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

使用@import

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

链接的使用

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

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

css import hyperlink

— 奥马尔·阿比德（Omar Abid）
source

142

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

史蒂夫Souders的写了大量的博客文章比较两个的影响<link>和@import所谓的“（和各种人组合）不使用@import ”。这个头衔几乎可以说明一切。

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

另外，使用<link>标签可以定义“ preferred”和备用样式表。您无法使用来做到这一点@import。

— 墨卡托
source

谢谢-漂亮的超链接-尤其是第一个。

— Faisal Vali

6

您可以使用import命令将css文件中的其他CSS导入，这是使用link命令无法实现的。真正的旧浏览器无法（部分是IE4，IE5）处理导入功能。另外，某些解析您的xhtml / html的库可能无法导入样式表。请注意，导入应该先于所有其他CSS声明。

— 梅尔库罗
source

6

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

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

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

— Zenazn
source

5

也可以为@import语句指定媒体。

— 乔治·Schölly

真？我想您可以在您的样式标签上添加一种媒体类型，但是对我而言，这似乎有点像是一种黑客。

— zenazn

5

您可以执行例如“ @import url（style.css）屏幕，打印”，尽管IE7及更高版本不支持媒体类型。

— 墨卡托

5

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

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

*（取决于浏览器）

— 猿藻
source

2

本文可能在这里有用：将CSS添加到HTML的4种方法：链接，嵌入，内联和导入

— 马修·詹姆斯·泰勒（Matthew James Taylor）
source

1

Quote：“让我们想象一下，我们有一个1000页的网站，我们从该站点的每个页面链接到一个CSS文件。现在，我们假设我们想向所有这些页面添加第二个CSS文件。我们可以编辑所有1000个HTML文件，添加第二个CSS链接，或者更好的方法是从第一个文件中导入第二个CSS文件。我们节省了很多时间！

— Casebash 2010年

1

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

— 巴里·加拉格尔
source

1

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

总体而言，<link>标签的处理速度比@import规则的处理速度更快（就CSS处理引擎而言，@import规则显然较慢）。

— 加布里埃尔·赫利（Gabriel Hurley）
source

0

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

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

现在我将要更改为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

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

— 西拉斯·布朗
source