@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
@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));
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
.
@import
supports
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que @import
.
Les spécifications CSS éditées par le W3C sont organisées en modules. @import
fait partie du Module CSS - Cascade et héritage (CSS Cascading and Inheritance). Les définitions suivantes sont également décrites dans ce même module.