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

Question

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

使用@import

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

使用链接

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

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

Answer 1

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

史蒂夫Souders的写了大量的博客文章比较两个的影响<link>和@import所谓的"(和各种人组合)不使用@import ".这个头衔几乎说不出话来.

雅虎 还提到它是他们的表现最佳实践之一(由Steve Souders共同撰写):选择<link>@import

此外,使用<link>标记可以定义"首选"和备用样式表.你不能这样做@import.

Answer 2

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

再说一遍,除非你支持真正的老浏览器,否则没有区别.

但是,如果我是你,我会<link>在HTML页面上使用该变体,因为它允许您指定媒体类型(打印,屏幕等).

Answer 3

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

Answer 4

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

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

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

*(取决于浏览器)