首页 > 代码库 > @import指令与link的区别及二者的使用注意事项

@import指令与link的区别及二者的使用注意事项

首先,二者都是从外部引入css文件的方式,其中@import语句需要放在css文件或者style标签中,且必须放在开头部分!

<link rel=‘stylesheet‘ href=http://www.mamicode.com/‘a.css‘>
Or you can use the @import rule:

<style>
@import url(‘a.css‘);
</style>

@import VS  Link ,二者的区别

  1. link属于XHTML标签,而@import完全是CSS提供的一种方式;
  2. 加载顺序的差别。比如,在a.css中使用import引用b.css, 只有当使用当使用import命令的宿主css文件a.css被 被下载、解析之后,浏览器才会知道还有另外一个b.css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作.
  3. 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
  4. 当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的

综上:

编码规范建议不要使用 @import

与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:

  • 使用多个 <link> 元素
  • 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
  • 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

参考文章:

http://codeguide.bootcss.com

@import指令与link的区别及二者的使用注意事项