@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 into which the contents of the linked resource are imported.

Imported rules must come before 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 [ <url> | <string> ]
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;

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

This is an example of creating two separate anonymous cascade layers and importing the linked rules into each one separately. A cascade layer declared without a name is an anonymous cascade layer. Anonymous 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