@import
CSS
at-rule
is used to import style rules from other style sheets.
@import url; @import url list-of-media-queries; @import url supports( supports-query ); @import url supports( supports-query ) list-of-media-queries;
where:
<string>
或
<url>
representing the location of the resource to import. The URL may be absolute or relative. Note that the URL for a Mozilla package need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g.
chrome://communicator/skin/
).
See here
了解更多信息。
<supports-condition>
或
<declaration>
.
Imported rules must precede all other types of rules, except
@charset
rules; as it is not a
nested statement
,
@import
cannot be used inside
conditional group at-rules
.
So that
用户代理
s can avoid retrieving resources for unsupported media types, authors may specify media-dependent
@import
rules. These conditional imports specify comma-separated
media queries
after the URL. In the absence of any media query, the import is unconditional. Specifying
all
for the medium has the same effect.
@import [ <string> | <url> ] [ <media-query-list> ]?;where
<media-query-list> = <media-query>#where
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?where
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>where
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>where
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )where
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>where
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Cascading and Inheritance Level 4
The definition of 'the
@import
rule' in that specification.
|
候选推荐 |
Extended the syntax to support the
@supports
句法。
|
|
CSS Cascading and Inheritance Level 3
The definition of '@import' in that specification. |
候选推荐 | |
|
Media Queries
The definition of '@import' in that specification. |
推荐 | Extended the syntax to support any media query and not only simple media types . |
|
CSS Level 2 (Revision 1)
The definition of '@import' in that specification. |
推荐 |
Added support for
<string>
to denote the url of a stylesheet,
and requirement to insert the
@import
rule at the beginning of the CSS document.
|
|
CSS Level 1
The definition of '@import' in that specification. |
推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
@import
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 5.5 | Opera 完整支持 3.5 | Safari 完整支持 1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
@import
@media