The @import
CSS at-rule is used to import style rules from other style sheets.
Syntax
@import url; @import url list-of-media-queries; @import url supports( supports-query ); @import url supports( supports-query ) list-of-media-queries;
where:
- url
- Is a
<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. - list-of-media-queries
- Is a comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any these queries, it does not load the linked resource.
- supports-query
- Is either a
<supports-condition>
or a<declaration>
.
Description
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 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.
Formal syntax
@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>
Examples
Importing CSS rules
@import 'custom.css';
@import url("chrome://communicator/skin/");
Importing CSS rules conditionally
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);
Specifications
Specification | Status | Comment |
---|---|---|
CSS Cascading and Inheritance Level 4The definition of 'the @import rule' in that specification.
|
Candidate Recommendation | Extended the syntax to support the @supports syntax.
|
CSS Cascading and Inheritance Level 3The definition of '@import' in that specification. | Candidate Recommendation | |
Media QueriesThe 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 |
CSS Level 1The definition of '@import' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@import
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 5.5 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
@import by Mozilla Contributors is licensed under CC-BY-SA 2.5.