@import
概述
语法
@import url; @import url list-of-media-queries;
其中:
- url
-
是一个表示要引入资源位置的
<string>
或者<uri>
(en-US) 。这个 URL 可以是绝对路径或者相对路径。要注意的是这个 URL 不需要指明一个文件;可以只指明包名,然后合适的文件会被自动选择 (e.g. chrome://communicator/skin/). See here 了解更多。 - list-of-media-queries
-
是一个逗号分隔的 媒体查询 条件列表,决定通过 URL 引入的 CSS 规则 在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件,就不会引入 URL 指明的 CSS 文件。
正规语法
@import =
@import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
<layer-name> =
<ident> (en-US) [ '.' <ident> (en-US) ]*
<import-conditions> =
[ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?
<supports-condition> =
not <supports-in-parens> |
<supports-in-parens> [ and <supports-in-parens> ]* |
<supports-in-parens> [ or <supports-in-parens> ]*
<supports-in-parens> =
( <supports-condition> ) |
<supports-feature> |
<general-enclosed>
<supports-feature> =
<supports-decl>
<general-enclosed> =
[ <function-token> <any-value>? ) ] |
[ ( <any-value>? ) ]
<supports-decl> =
( <declaration> )
示例
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
规范
Specification |
---|
CSS Cascading and Inheritance Level 5 # at-import |
浏览器兼容性
BCD tables only load in the browser