@import url;
@import url list-of-media-queries;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) 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.

layer-name

Is the name of a cascade layer into which the contents of the linked resource are imported.

Imported rules must come before all other types of rules, except @charset rules and layer creating @layer statements. 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 = 
  @import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;  

<url> = 
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )  

<layer-name> = 
  <ident> [ '.' <ident> ]*  

<import-conditions> = 
  [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<supports-feature> = 
  <supports-decl>  

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<supports-decl> = 
  ( <declaration> )  

@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);

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 landscape.css stylesheet only on a screen device in landscape orientation.

@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;

This is an example of creating two separate unnamed cascade layers and importing the linked rules into each one separately. A cascade layer declared without a name is an unnamed cascade layer. Unnamed cascade layers are finalized when created: they do not provide any means for re-arranging or adding styles and they cannot be referenced from outside.

• @media
• @supports