@import - Directive CSS
Résumé des caractéristiques de la directive @import
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 pour @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
@mediapour 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.cssque sur les navigateurs qui ne traitent pas les conteneurs grille.@import url('styles/compat-styles.css') supports( not (display:grid));
Prise en charge par les navigateurs (compatibilité).
La directive @import est globalement bien reconnue, mais il reste des problèmes de compatibilité avec les nouvelles fonctionnalités.
@import.
supports.
@importde cascade
supports()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
É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@importdans la spécification CSS.
04 Novembre 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
Module CSS - Cascade et héritage - Niveau 3
Pas de changement concernant la directive@import.13 Juillet 2001Document de travail.
03 Octobre 2013Candidat à la recommandation.22 Décembre 2020Proposé à la recommandation.11 Février 2021Recommandation. -
Module CSS - Cascade et héritage - Niveau 4
Pas de changement concernant la directive@import.21 Avril 2015Document de travail.14 Janvier 2016Candidat à la recommandation. -
Module CSS - Cascade et héritage - Niveau 5
La directive@importpermet d'importer des styles dans une couche de cascade particulière.19 Janvier 2021Document de travail.13 Janvier 2022Candidat à 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.