W3cubDocs

/CSS

@import

The @import CSS at-rule is used to import style rules from other valid stylesheets. An @import rule must be defined at the top of stylesheet, before any other at-rule (except @charset and @layer) and style declaration, else it will be ignored.

Syntax

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

Description

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.

Formal syntax

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

Examples

Importing CSS rules

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

Importing CSS rules conditionally

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

Importing CSS rules into a cascade layer

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
@import 1 12 1 5.5 3.5 1 ≤37 18 4 10.1 1 1.0
layer 99 99 97 No 85 15.4 99 99 97 68 15.4 18.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@import