La règle CSS @import
La règle CSS @import permet d'importer des règles de style depuis d'autres feuilles de style et de prendre en charge les media queries. Voyez les valeurs et essayez des exemples.
La règle CSS @import importe les règles de style d'une feuille de style externe dans une autre. Elle vous permet de répartir votre CSS sur plusieurs fichiers (par exemple, un fichier par composant ou par thème) et de les combiner depuis un seul point d'entrée. Elle peut également charger une feuille de façon conditionnelle en fonction d'une media query.
Le mot-clé @import doit être suivi de l'emplacement de la feuille que vous souhaitez inclure, écrit soit sous la forme url(), soit comme une simple chaîne de caractères. Les deux lignes ci-dessous produisent le même résultat :
@import url("theme.css");
@import "theme.css";Où la règle doit être placée
@import n'est valide qu'en tout début de feuille de style. Elle doit apparaître avant toute autre règle, à l'exception de @charset et @layer (une simple déclaration @layer sans bloc). Si vous placez un @import après une règle normale telle qu'un bloc de sélecteur, le navigateur l'ignore.
@charset "utf-8"; /* allowed first */
@import "reset.css"; /* imports must come before any styles */
body {
margin: 0;
}
@import "late.css"; /* invalid — ignored, because a rule already appeared */@import ne peut pas être utilisé à l'intérieur de règles conditionnelles de groupe telles que @media ou @supports. Pour charger une feuille uniquement sous certaines conditions, associez la condition directement à @import lui-même (voir Media queries ci-dessous).
@import par rapport à l'élément <link>
Il est également possible d'inclure une feuille de style depuis HTML avec <link rel="stylesheet" href="theme.css">. Les deux approches produisent le même résultat, mais elles diffèrent en termes de performances :
- Une balise
<link>est découverte par le navigateur lors de l'analyse du HTML, de sorte que le fichier peut commencer à se télécharger immédiatement et en parallèle avec les autres ressources. - Un
@importn'est trouvé qu'après que la feuille de style parente a été téléchargée et analysée. Cela crée une chaîne de requêtes (HTML → main.css → imported.css) qui peut retarder le rendu.
Pour les feuilles de style de premier niveau, préférez <link>. Utilisez @import lorsque vous souhaitez spécifiquement une composition au niveau CSS — par exemple, pour assembler un seul paquet à partir de plusieurs partiels ou pour importer une feuille dans une couche de cascade nommée.
| Valeur initiale | - |
|---|---|
| S'applique à | - |
| Héritage | Non. |
| Animatable | Non. |
| Version | CSS2 |
| Syntaxe DOM | N/A |
Syntaxe
Syntaxe de la règle CSS @import
@import <url> | <string> [ <media-query-list> ]? ;Exemple de la règle @import :
Exemple de la règle CSS @import
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
@import url('https://fonts.googleapis.com/css?family=Coiny');
@import url('https://fonts.googleapis.com/css?family=Lobster');
.p1 {
font-family: 'Coiny', cursive;
}
.p2 {
font-family: 'Lobster', cursive;
}
</style>
</head>
<body>
<h2>@import at-rule example</h2>
<p class="p1">The @import rule allows you to import a style sheet into another style sheet.</p>
<p class="p2">The @import rule also supports media queries, so you can allow the import to be media-dependent.</p>
</body>
</html>Résultat
La différence entre une URL relative et une URL absolue
Les types de données <url> et <string> sont acceptés par la règle @import pour déterminer le fichier à importer. Cela peut être fourni sous forme d'URL absolue ou relative.
L'exemple de code ci-dessous utilise une URL relative. Cela signifie que l'URL est relative à l'emplacement de la feuille de style actuelle. Il n'est donc pas nécessaire de fournir un chemin d'accès. Il suffit de fournir le nom du fichier.
Règle CSS @import
@import "relative.css";Dans l'exemple suivant, l'URL est toujours relative, bien que nous ayons fourni quelques informations de chemin :
Règle CSS @import
@import "../css/relative.css";Comme vous pouvez le voir, l'exemple de code suivant inclut le chemin complet avec le nom de domaine. Cela signifie que l'URL est absolue.
Règle CSS @import
@import "http://www.examples.fr/css/absolute.css";Media queries
@import accepte une media query après l'URL, de sorte que la feuille n'est appliquée que lorsque la condition correspond. C'est ainsi que vous rendez un import dépendant d'un media sans l'encapsuler dans @media (ce qui n'est pas autorisé).
La feuille ci-dessous ne se charge que lorsque la page est imprimée :
@import "print.css" print;Vous pouvez utiliser n'importe quelle media query, y compris des requêtes de fonctionnalité telles que width :
@import "wide.css" screen and (min-width: 768px);Le navigateur télécharge toujours le fichier quelle que soit la condition — la media query détermine uniquement si les règles sont appliquées, non si le fichier est récupéré.
Importation dans une couche de cascade
Une fonctionnalité moderne vous permet d'affecter une feuille importée à une couche de cascade nommée avec layer(). Tout ce qui se trouve dans le fichier importé participe alors à la priorité de cette couche, ce qui est un moyen efficace d'empêcher le CSS tiers de remplacer le vôtre :
@import "bootstrap.css" layer(framework);Vous pouvez également conditionner un import avec une requête de fonctionnalité en utilisant supports(), afin que la feuille ne se charge que si le navigateur comprend une déclaration donnée :
@import "grid.css" supports(display: grid);Valeurs
| Valeur | Description |
|---|---|
| url | Un <url> ou <string> indiquant l'emplacement de la ressource à importer. L'URL peut être relative ou absolue. |
| string list-of-mediaqueries | Une liste de media queries séparées par des virgules, conditionnant l'application des règles CSS définies dans l'URL liée. |