@import - CSS At-rule

Description of the @import at-rule.

@import is a CSS language directive that lets you insert styles from another style-sheet, with a twofold purpose:

• Make it easier to organize CSS code by spreading it across multiple files.
• Optimize the code by only loading the styles you need. The support() condition or the media list are there for that.

The @import directive must be placed before the style definitions, so at the beginning of the style-sheet, but after any possible @charset or @layer directives.
@import cannot be nested inside another directive.

Imported styles are handled exactly as if they were written where the @import directive is. If there are relative paths in the imported style-sheet, they will be resolved relative to the location of the file where @import appears.

Syntaxes of the @import at-rule.

• @import url('path/file.css'); @import 'path/file.css';

  A URL, referring to the style file to load, or a string (in single or double quotes). The url() function is therefore optional.

• @import url('path/file.css') print; @import url('path/file.css') print, screen and (min-width:900px);

  The file name can be followed by a list of media, possibly with criteria about the characteristics of the device (media queries). Check out the @media directive for a more complete description of the allowed media and the syntax of media queries.

  This option is meant to optimize loading; the browser only downloads the files that match the media being used.

• @import url('path/file.css') layer(nom);

  Specifying a cascade layer lets you import styles into that particular layer.

  For more information, check out the tutorial on cascading layers.

• @import url('path/file.css') supports( ... );

  This syntax lets you add a condition when importing the style-sheet. This condition can refer to CSS features, selectors, technologies, etc. Refer to the syntax of @supports for more information on what you can put inside the parentheses.

  Example: the syntax below imports the compat-styles.css file only on browsers that don't handle grid containers.

  @import url('styles/compat-styles.css') supports( not (display:grid) );

Browsers compatibility with the @import at-rule.

The @import directive is generally well recognized, but there are still some compatibility issues with the new features.

1

@import
at-rule

2

Cascade
layers

3

supports()
function

Estimated overall support.

96%

95%

89%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Firefox

Safari sur IOS

KaiOS Browser

Opéra

Safari

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Evolution of the @import at-rule.

The directive @import has changed little since its creation, except for the recent ability to import styles into a chosen cascade layer. Check out the directive @layer for more details on cascade layers.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

  Regarding @import Introduction of the @import at-rule in the CSS specification.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Cascading and Inheritance Level 3

  This specification module introduces the values initial and unset, as well as the shorthand property all.

  Regarding @import No change regarding the @import at-rule.
  

  July 13, 2001

  Working Draft.

  

  October 03, 2013

  Candidate Recommendation.

  

  December 22, 2020

  Proposed for recommendation.

  

  February 11, 2021

  Recommendation .

• CSS Cascading and Inheritance Level 4

  This specification module introduces the revert value.

  Regarding @import No change regarding the @import at-rule.
  

  April 21, 2015

  Working Draft.

  

  January 14, 2016

  Candidate Recommendation.

  

  

• CSS Cascading and Inheritance Level 5

  This specification module introduces the concept of style layer, the @layer directive, and the revert-layer value.

  Regarding @import The @import at-rule allows you to import styles into a particular cascade layer.
  

  January 19, 2021

  Working Draft.

  

  January 13, 2022

  Candidate Recommendation.

  

  

See also, regarding the management of style-sheets.

The specification "CSS Cascading and Inheritance" gathers the tools available to organize styles in complex cases (many style sheets, large inheritance cascades, etc.).

Properties:

At-rules:

@import

Importing a stylesheet, with the possibility of choosing a cascade layer.

@layer

Defines cascade layers to help manage priorities between CSS rules.

⚠

@scope

Limit the scope of the instructions encompassed by this directive.

Values: