什么是 import 指令
import 指令是用来导入 CSS 样式的；
导入样式不是已经有 link 标签了么？link 标签可以导入外部 CSS 样式，import 仍然可以导入外部 CSS 样式；
import 基本用法
-
在 HTML 文件中导入外部样式
<style> @import url('./index.css'); </style> -
在 CSS 文件中引入另一个 CSS 文件
@import url('./index.css'); /* 后面书写其他样式 */ -
@import 规则还支持媒体查询，因此可以允许依赖媒体的导入
/* 只在媒体为 print 时导入 "printstyle.css" 样式表 */ @import "printstyle.css" print; /* 只在媒体为 screen 且视口最大宽度 768 像素时导入 "mobstyle.css" 样式表 */ @import "mobstyle.css" screen and (max-width: 768px);
import 和 link 的区别
-
link 属于 HTML 标签，而 @import 完全是 CSS 提供的一种方式
- link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS、定义 rel 连接属性等；
- @import 只能加载 CSS；
-
加载顺序的差别
比如，在 a.css 中使用 import 引用 b.css，只有当使用 import 命令的宿主 css 文件 a.css 被下载、解析之后，浏览器才会知道还有另外一个 b.css 需要下载，这时才去下载，然后下载后开始解析、构建 render tree 等一系列操作；
-
兼容性的差别
由于 @import 是 CSS2.1 提出的所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题；
-
当使用 JS 控制 DOM 去改变样式的时候，只能使用 link 标签，因为 @import 不是 DOM 可以控制的
对于可换皮肤的网站而言，可以通过改变 link 标签这两个的 href 值来改变应用不用的外部样式表，但是对于 import 是无法操作的，毕竟不是标签；
import 的问题
从性能优化的角度来讲，尽量要避免使用 @import；
- 使用 @import 引入 CSS 会影响浏览器的并行下载；
- 使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载、解析之后，浏览器才会知道还有另外一个 CSS 需要下载，这时才去下载，然后下载后开始解析、构建 Render Tree 等一系列操作；
多个 @import 会导致下载顺序紊乱；在 IE 中 @import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 JS 文件先于 @import 下载，并且打乱甚至破坏 @import 自身的并行下载；
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级✍️ CSS 属性的计算过程、层叠规则、继承规则
上一篇
评论
