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

Syntax

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

where:

url

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

list-of-media-queries

Is a comma-separated list ofmedia 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 acascade layer into which the contents of the linked resource are imported. Seelayer() for more information.

supports-condition

Indicates the feature(s) that the browser must support in order for the stylesheet to be imported.If the browser does not conform to the conditions specified in thesupports-condition, it may not fetch the linked stylesheet, and even if downloaded through some other path, will not load it.The syntax ofsupports() is almost identical to that described in@supports, and that topic can be used as a more complete reference.

Use@import together with thelayer keyword orlayer() function to import external style sheets (from frameworks, widget stylesheets, libraries, etc.) into layers.

Description

Imported rules must come before all other types of rules, except@charset rules and layer creating@layer statements.

* {  margin: 0;  padding: 0;}/* more styles */@import "my-imported-styles.css";

As the@import at-rule is declared after the styles it is invalid and hence ignored.

@import "my-imported-styles.css";* {  margin: 0;  padding: 0;}/* more styles */

The@import rule is not anested statement. Therefore, it cannot be used insideconditional group at-rules.

So thatuser agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent import conditions. These conditional imports specify comma-separatedmedia queries after the URL. In the absence of any media query, the import is not conditional on the media used. Specifyingall for thelist-of-media-queries has the same effect.

Similarly, user agents can use thesupports() function in an@import at-rule to only fetch resources if a particular feature set is (or is not) supported.This allows authors to take advantage of recently introduced CSS features, while providing graceful fallbacks for older browser versions.Note that the conditions in thesupports() function of an@import at-rule can be obtained in JavaScript usingCSSImportRule.supportsText.

The@import rule can also be used to create acascade layer by importing rules from a linked resource. Rules can also be imported into an existing cascade layer. Thelayer keyword or thelayer() 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> ;

<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-selector-fn>|
<supports-font-tech-fn>|
<supports-font-format-fn>|
<supports-at-rule-fn>|
<supports-decl>

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

<supports-selector-fn> =
selector(<complex-selector>)

<supports-font-tech-fn> =
font-tech(<font-tech>)

<supports-font-format-fn> =
font-format(<font-format>)

<supports-at-rule-fn> =
at-rule(<at-keyword-token>)

<supports-decl> =
  ([<declaration>|<supports-condition-name>])

<complex-selector> =
<complex-selector-unit>[<combinator>?<complex-selector-unit>]*

<font-tech> =
<font-features-tech>|
<color-font-tech>|
variations|
palettes|
incremental

<font-format> =
<string>|
collection|
embedded-opentype|
opentype|
svg|
truetype|
woff|
woff2

<complex-selector-unit> =
[<compound-selector>?<pseudo-compound-selector>*]!

<combinator> =
  '>'|
  '+'|
  '~'|
[ '|' '|']

<font-features-tech> =
features-opentype|
features-aat|
features-graphite

<color-font-tech> =
color-COLRv0|
color-COLRv1|
color-SVG|
color-sbix|
color-CBDT

<compound-selector> =
[<type-selector>?<subclass-selector>*]!

<pseudo-compound-selector> =
<pseudo-element-selector><pseudo-class-selector>*

<type-selector> =
<wq-name>|
<ns-prefix>? '*'

<subclass-selector> =
<id-selector>|
<class-selector>|
<attribute-selector>|
<pseudo-class-selector>

<pseudo-element-selector> =
  :<pseudo-class-selector>|
<legacy-pseudo-element-selector>

<pseudo-class-selector> =
  :<ident-token>|
  :<function-token><any-value>)

<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>? ']'

<legacy-pseudo-element-selector> =
  :[before|after|first-line|first-letter]

<attr-matcher> =
[ '~'| '|'| '^'| '$'| '*']? '='

<attr-modifier> =
i|
s

Examples

Importing CSS rules

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

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

Importing CSS rules conditional on media queries

@import "fine-print.css" print;@import "bluish.css" print, screen;@import "common.css" screen;@import "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 thelandscape.css stylesheet only on a screen device in landscape orientation.

Importing CSS rules conditional on feature support

@import "grid.css" supports(display: grid) screen and (width <= 400px);@import "flex.css" supports((not (display: grid)) and (display: flex)) screen  and (width <= 400px);

The@import rules above illustrate how you might import a layout that uses a grid ifdisplay: grid is supported, and otherwise imports CSS that usesdisplay: flex.While you can only have onesupports() statement, you can combine any number of feature checks withnot,and, andor. However, you must use parenthesis to define precedence when you mix them, e.g.,supports((..) or (..) and not (..)) is invalid, butsupports((..) or ((..) and (not (..)))) is valid.Note that if you just have a single declaration then you don't need to wrap it in additional parentheses: this is shown in the first example above.

The examples above show support conditions using basic declaration syntax.You can also specify CSS functions insupports(), and it will evaluate totrue if they are supported and can be evaluated on the user-agent.For example, the code below shows an@import that is conditional on bothchild combinators (selector()) and thefont-tech() function:

@import "whatever.css"  supports((selector(h2 > p)) and (font-tech(color-COLRv1)));

Importing CSS rules into a cascade layer

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

In the above example, a cascade layer namedutilities is created and it will include rules from the imported stylesheettheme.

@import "headings.css" layer(default);@import "links.css" layer(default);@layer default {  audio[controls] {    display: block;  }}

In the above example, the rules inheadings.css andlinks.css stylesheets cascade within the same layer as theaudio[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

See also

• @media
• @supports
• CSS cascading and inheritance module
• CSS at-rule functions