@import

Syntaxe

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

où :

url

Est une chaîne de caractères (<string>) ou une valeur de type <url> représentant l'emplacement de la ressource à importer. L'URL peut être absolue ou relative.

list-of-media-queries

Est une liste de requêtes média séparées par des virgules, qui spécifient les conditions dépendantes du média pour appliquer les règles CSS définies dans l'URL liée. Si le navigateur ne prend en charge aucune de ces requêtes, il ne charge pas la ressource liée.

layer-name

Est le nom d'une couche de cascade dans laquelle le contenu de la ressource liée est importé. Voir layer() pour plus d'informations.

supports-condition

Indique la ou les fonctionnalités que le navigateur doit prendre en charge pour que la feuille de style soit importée. Si le navigateur ne respecte pas les conditions spécifiées dans supports-condition, il peut ne pas récupérer la feuille de style liée, et même si elle est téléchargée par un autre moyen, elle ne sera pas chargée. La syntaxe de supports() est presque identique à celle décrite dans @supports, qui peut servir de référence plus complète.

Utilisez @import avec le mot-clé layer ou la fonction layer() pour importer des feuilles de style externes (issues de frameworks, de styles de widgets, de bibliothèques, etc.) dans des couches.

Description

Les règles importées doivent apparaître avant tous les autres types de règles, sauf les règles @charset et les instructions de création de couche @layer.

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

Comme la règle at-rule @import est déclarée après les styles, elle est invalide et donc ignorée.

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

La règle @import n'est pas une instruction imbriquée. Elle ne peut donc pas être utilisée à l'intérieur de groupes conditionnels des règles @.

Pour que les agents utilisateur puissent éviter de récupérer des ressources pour des types de média non pris en charge, les auteur·ice·s peuvent spécifier des conditions d'importation dépendantes du média. Ces importations conditionnelles spécifient des requêtes média séparées par des virgules après l'URL. En l'absence de requête média, l'importation n'est pas conditionnée au média utilisé. Spécifier all pour la list-of-media-queries a le même effet.

De même, les agents utilisateur peuvent utiliser la fonction supports() dans une règle at-rule @import pour ne récupérer les ressources que si un ensemble de fonctionnalités particulier est (ou n'est pas) pris en charge.

Cela permet aux auteur·ice·s de profiter des fonctionnalités CSS récemment introduites, tout en assurant une rétrocompatibilité pour les anciennes versions de navigateurs. Notez que les conditions de la fonction supports() d'une règle at-rule @import peuvent être obtenues en JavaScript via CSSImportRule.supportsText.

La règle @import peut aussi être utilisée pour créer une couche de cascade en important des règles depuis une ressource liée. Les règles peuvent aussi être importées dans une couche de cascade existante. Le mot-clé layer ou la fonction layer() sont utilisés avec @import à cet effet. Les déclarations des règles de style des feuilles importées interagissent avec la cascade comme si elles étaient écrites littéralement dans la feuille de style au point d'importation.

Syntaxe formelle

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

<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  

Exemples

Importer des règles CSS

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

Les deux exemples ci-dessus montrent comment spécifier l'url comme <string> et comme fonction url().

Importer des règles CSS conditionnées par des requêtes média

@import "fine-print.css" print;
@import "bluish.css" print, screen;
@import "common.css" screen;
@import "landscape.css" screen and (orientation: landscape);

Les règles @import dans les exemples ci-dessus montrent des conditions dépendantes du média qui doivent être vraies avant que les règles CSS liées ne soient appliquées. Par exemple, la dernière règle @import chargera la feuille de style landscape.css uniquement sur un appareil écran en orientation paysage.

Importer des règles CSS conditionnées par la prise en charge de fonctionnalités

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

Les règles @import ci-dessus illustrent comment importer une mise en page utilisant une grille si display: grid est pris en charge, et sinon importer du CSS utilisant display: flex. Bien que vous ne puissiez avoir qu'une seule instruction supports(), vous pouvez combiner autant de vérifications de fonctionnalités que nécessaire avec not, and et or. Cependant, il faut utiliser des parenthèses pour définir la priorité lorsque vous les mélangez, par exemple supports((..) or (..) and not (..)) est invalide, mais supports((..) or ((..) and (not (..)))) est valide. Notez que si vous n'avez qu'une seule déclaration, il n'est pas nécessaire de l'entourer de parenthèses supplémentaires : cela est montré dans le premier exemple ci-dessus.

Les exemples ci-dessus montrent des conditions de prise en charge utilisant la syntaxe de déclaration de base. Vous pouvez aussi spécifier des fonctions CSS dans supports(), et cela sera évalué à true si elles sont prises en charge et peuvent être évaluées par l'agent utilisateur. Par exemple, le code ci-dessous montre une règle @import conditionnée à la fois par le combinateur d'enfant (selector()) et la fonction font-tech() :

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

Importer des règles CSS dans une couche de cascade

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

Dans l'exemple ci-dessus, une couche de cascade nommée utilities est créée et inclura les règles de la feuille de style importée theme.

@import "headings.css" layer(default);
@import "links.css" layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

Dans l'exemple ci-dessus, les règles des feuilles de style headings.css et links.css sont mises en cascade dans la même couche que la règle audio[controls].

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

Ceci est un exemple de création de deux couches de cascade sans nom distinctes et d'importation des règles liées dans chacune séparément. Une couche de cascade déclarée sans nom est une couche de cascade sans nom. Les couches de cascade sans nom sont finalisées lors de leur création : elles ne permettent pas de réorganiser ou d'ajouter des styles et ne peuvent pas être référencées de l'extérieur.

Spécifications

Compatibilité des navigateurs

Voir aussi

• @media
• @supports
• Le module cascade et héritage CSS
• Fonctions des règles @ CSS