Règle @import CSS

Définition et utilisation

La règle @import vous permet d'importer un feuille de style dans un autre feuille de style.

La règle @import doit être placée en haut du document (mais après toute déclaration @charset).

La règle @import prend également en charge les requêtes média, permettant ainsi l'importation dépendante du média.

Exemple

Exemple 1

Importe le feuille de style "navigation.css" dans le feuille de style courant :

@import "navigation.css"; /* Utilisation de la chaîne de caractères */

ou

@import url("navigation.css"); /* Utilisation de l'url */

Exemple 2

Importe le feuille de style "printstyle.css" uniquement lorsque le média est print :

@import "printstyle.css" print;

Essayez-le vous-même

Exemple 3

Importe le feuille de style "mobstyle.css" uniquement lorsque le média est screen et que la largeur maximale de la vue est de 768 pixels :

@import "mobstyle.css" screen and (max-width: 768px);

Essayez-le vous-même

Syntaxe CSS

@import url|string list-of-mediaqueries;

Valeur de l'attribut

Valeur Description
url|string url ou chaîne de caractères, représentant l'emplacement du fichier de ressource à importer. L'url peut être absolu ou relatif.
list-of-mediaqueries Liste de requêtes média séparées par des virgules, déterminant les conditions dans lesquelles les règles CSS introduites par URL s'appliquent.

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 3.5