The @import
CSS at-rule is used to import style rules from other style sheets. These 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.
@import url("fineprint.css") print; @import url("bluish.css") speech; @import 'custom.css'; @import url("chrome://communicator/skin/"); @import "common.css" screen; @import url('landscape.css') screen and (orientation:landscape);
So that user agents 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 url; @import url list-of-media-queries;
where:
<string>
or a <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 for more information.@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>
Specification | Status | Comment |
---|---|---|
CSS Cascading and Inheritance Level 3 The definition of '@import' in that specification. | Candidate Recommendation | |
Media Queries The definition of '@import' in that specification. | Recommendation | 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. | Recommendation | 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. | Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | Yes | Yes | 5.5 | Yes | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@import