Web/CSS/@import

From Get docs


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 @import rule at the beginning of the CSS document.

CSS Level 1The definition of '@import' in that specification. Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
@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.