@import - Directive CSS

Description de la directive @import.

@import est une directive du langage CSS, qui permet d'insérer des styles à partir d'une autre feuille de styles, avec un double objectif :

• Faciliter l'organisation du code CSS en le répartissant sur plusieurs fichiers.
• Optimiser le code en ne chargeant que les styles nécessaires. La conditions support() ou la liste de médias sont là pour ça.

La directive @import doit se trouver avant la définition des styles, donc au début de la feuille de styles, mais après d'éventuelles directives @charset ou @layer.
@import ne peut pas être imbriqué dans une autre directive.

Les styles importés sont traités exactement comme s'ils avaient été écrits à l'endroit où se trouve la directive @import. Si des chemins relatifs figurent dans la feuille de styles importée, ils seront résolus par rapport à l'emplacement du fichier où figure @import.

Syntaxes de la directive @import.

• @import url('chemin/fichier.css'); @import 'chemin/fichier.css';

  Une URL, désignant le fichier de styles à charger, ou une chaîne de caractères (entre apostrophes ou guillemets). La fonction url() est donc facultative.

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

  Le nom du fichier, peut être suivi d'une liste de médias, avec éventuellement des critères sur les caractéristiques du terminal (média-queries). Reportez vous à la directive @media pour une description plus complète des médias autorisés et de la syntaxe des média-queries.

  Cette option vise à optimiser les chargements, le navigateur ne télécharge que les fichiers correspondant au média utilisé.

• @import url('chemin/fichier.css') layer(nom);

  L'indication d'une couche de cascade (layer) permet d'importer des styles dans cette couche particulière.

  Pour d'autres informations, reportez vous au tutoriel sur les couches de cascade.

• @import url('chemin/fichier.css') supports( ... );

  Cette syntaxe permet d'introduire une condition sur l'importation de la feuille de styles. Cette condition peut faire référence à des fonctionnalités de CSS, des sélecteurs, des technologies, etc. Reportez-vous à la syntaxe de @supports pour plus d'informations sur ce que vous pouvez mettre dans les parenthèses.

  Exemple : la syntaxe ci-dessous n'importe le fichier compat-styles.css que sur les navigateurs qui ne traitent pas les conteneurs grille.

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

Compatibilité des navigateurs avec la directive @import.

La directive @import est globalement bien reconnue, mais il reste des problèmes de compatibilité avec les nouvelles fonctionnalités.

1

Directive
@import

2

Couches
de cascade

3

Fonction
supports()

Estimation de la prise en charge globale.

96%

95%

89%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Évolution de la directive @import.

La directive @import a peu évolué depuis sa création, si ce n'est la possibilité récente d'importer des styles dans une couche de cascade choisie. Reportez-vous à la directive @layer pour plus de précisions sur les couches de cascade.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant @import Introduction de la directive @import dans la spécification CSS.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Cascade et héritage - Niveau 3

  Ce module de spécification introduit les valeurs initial et unset, ainsi que la propriété résumée all.

  Concernant @import Pas de changement concernant la directive @import.
  

  13 Juillet 2001

  Document de travail.

  

  03 Octobre 2013

  Candidat à la recommandation.

  

  22 Décembre 2020

  Proposé à la recommandation.

  

  11 Février 2021

  Recommandation.

• Module CSS - Cascade et héritage - Niveau 4

  Ce module de spécification introduit la valeur revert.

  Concernant @import Pas de changement concernant la directive @import.
  

  21 Avril 2015

  Document de travail.

  

  14 Janvier 2016

  Candidat à la recommandation.

  

  

• Module CSS - Cascade et héritage - Niveau 5

  Ce module de spécification introduit la notion de couches de styles, la directive @layer, et la valeur revert-layer.

  Concernant @import La directive @import permet d'importer des styles dans une couche de cascade particulière.
  

  19 Janvier 2021

  Document de travail.

  

  13 Janvier 2022

  Candidat à la recommandation.

  

  

Voir aussi, au sujet de la gestion des feuilles de styles.

La spécification "Module CSS - Cascade et héritage" (Module CSS - Cascade et héritage) regroupe les outils disponibles pour organiser les styles dans les cas complexes (nombreuses feuilles de styles, cascade d'héritages volumineuse, etc.

Propriétés :

Directives :

Valeurs: