@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, facilitant ainsi l'organisation du code CSS en le répartissant sur plusieurs fichiers.

La directive @import doit se trouver avant la définition des styles, donc au début de la feuille de styles, mais après une éventuelle directive @charset.

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 donc résolus par rapport à l'emplacement du fichier où figure @import.

Syntaxes de la directive @import.

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

  Une url, désignant le fichier de styles à charger.

• @import 'styles/fichier.css';

  Une chaîne de caractères, entre apostrophes ou entre guillemets. Cette syntaxe est équivalente à la précédente. La fonction url() et donc facultative.

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

  L'url, ou 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 peut ne télécharger que les fichiers correspondant au média utilisé.

• @import url('styles/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('styles/fichier.css') supports( ... );

  Cette syntaxe permet d'introduire une condition sur l'importation de la feuille de styles.

  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

Couchees
de cascade

3

Fonction
supports()

Estimation de la prise en charge globale.

96%

93%

88%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

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

  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

  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

  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

  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" (CSS Cascading and Inheritance) 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: