Larègle @CSS@import est utilisée pour importer des règles de style depuis d'autres feuilles de style valides.Une règle@importdoit être définie en haut de la feuille de style, avant toute autre règle @ (sauf@charset et@layer) et toute déclaration de style, sinon elle sera ignorée.

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 derequê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'unecouche de cascade dans laquelle le contenu de la ressource liée est importé. Voirlayer() 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 danssupports-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 desupports() 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 fonctionlayer() 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 uneinstruction imbriquée. Elle ne peut donc pas être utilisée à l'intérieur degroupes conditionnels des règles @.

Pour que lesagents 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 desrequê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écifierall pour lalist-of-media-queries a le même effet.

De même, les agents utilisateur peuvent utiliser la fonctionsupports() 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 fonctionsupports() d'une règle at-rule@import peuvent être obtenues en JavaScript viaCSSImportRule.supportsText.

La règle@import peut aussi être utilisée pour créer unecouche 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 fonctionlayer() 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-named-feature-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-named-feature-fn> =
named-feature(<ident>)

<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

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 fonctionurl().

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 stylelandscape.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 sidisplay: grid est pris en charge, et sinon importer du CSS utilisantdisplay: flex.Bien que vous ne puissiez avoir qu'une seule instructionsupports(), vous pouvez combiner autant de vérifications de fonctionnalités que nécessaire avecnot,and etor. Cependant, il faut utiliser des parenthèses pour définir la priorité lorsque vous les mélangez, par exemplesupports((..) or (..) and not (..)) est invalide, maissupports((..) 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 danssupports(), 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 lecombinateur d'enfant (selector()) et la fonctionfont-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éeutilities est créée et inclura les règles de la feuille de style importéetheme.

@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 styleheadings.css etlinks.css sont mises en cascade dans la même couche que la règleaudio[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

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