首页 > 代码库 > @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 ,二者的区别
- link属于XHTML标签,而@import完全是CSS提供的一种方式;
- 加载顺序的差别。比如,在a.css中使用import引用b.css, 只有当使用当使用import命令的宿主css文件a.css被 被下载、解析之后,浏览器才会知道还有另外一个b.css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作.
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
- 当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
综上:
编码规范建议不要使用 @import
与 <link>
标签相比,@import
指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:
- 使用多个
<link>
元素 - 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
- 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
参考文章:
http://codeguide.bootcss.com
@import指令与link的区别及二者的使用注意事项
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。