@import

@import url;
@import url list-of-media-queries;
@import url supports( supports-query );
@import url supports( supports-query ) list-of-media-queries;
@import url layer;
@import url layer( layer-name );
@import url layer( layer-name ) list-of-media-queries;
@import url layer( layer-name ) supports( supports-query ) list-of-media-queries;

where:

url

Is a <string>, a <url>, or a url() function representing the location of the resource to import. The URL may be absolute or relative.

list-of-media-queries

Is a comma-separated list of media queries, which specify the media-dependent conditions for applying the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.

supports-query

Is either a <supports-condition> or a <declaration>. If the import conditions do not match, the rules in the imported stylesheet do not apply.

layer-name

Is the name of a cascade layer that imports the contents of the linked resource. A cascade layer declared without a name (anonymous cascade layer) does not provide any means for re-arranging or adding styles and cannot be referenced from outside.

Imported rules must precede all other types of rules, except @charset rules. The @import rule is not a nested statement. Therefore, it 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 conditions. 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 list-of-media-queries has the same effect.

The @import rule can also be used to create a cascade layer by importing rules from a linked resource. Rules can also be imported into an existing cascade layer. The layer keyword or the layer() function is used with @import for this purpose. Declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the import.

@import [ <string> | <url> ]
        [ layer | layer(<layer-name>) ]?
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;
where 
<supports-condition> = not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*
<media-query-list> = <media-query>#
where 
<supports-in-parens> = ( <supports-condition> ) | <supports-feature> | <general-enclosed>
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
where 
<supports-feature> = <supports-decl> | <supports-selector-fn>
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
<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 
<supports-decl> = ( <declaration> )
<supports-selector-fn> = selector( <complex-selector> )
<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 
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
where 
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]
<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 
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
where 
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]?  | 
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
where 
<attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

@import 'custom.css';
@import url("chrome://communicator/skin/");

The two examples above show how to specify the url as a <string> and as a url() function.

@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url('landscape.css') screen and (orientation: landscape);
@import url("narrow.css") supports(display: flex) screen and (max-width: 400px);

The @import rules in the above examples show media-dependent conditions that will need to be true before the linked CSS rules are applied.

So for instance, the last @import rule will load the narrow.css stylesheet if the user agent supports display: flex. The media query, using the and operator, further specifies to apply the style rules only to a screen device with a maximum viewport width of 400px.

@import 'theme.css' layer(utilities);

In the above example, a cascade layer named utilities is created and it will include rules from the imported stylesheet theme.

@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

In the above example, the rules in headings.css and links.css stylesheets cascade within the same layer as the audio[controls] rule.

@import 'theme.css' layer();
@import 'style.css' layer;

These are examples of creating anonymous cascade layers and importing the linked rules into them.

• @media
• @supports