@import

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La règle @ @import est utilisée afin d'importer des règles à partir d'autres feuilles de style. Ces règles @ doivent être utilisées avant toutes les autres règles, à l'exception de @charset. @import n'est pas une instruction imbriquée et ne peut donc pas être utilisée à l'intérieur de groupe de règles conditionnelles.

css
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);

Afin que les agents utilisateurs évitent de récupérer des ressources pour des types de média qui ne sont pas pris en charge, les auteurs peuvent définir des règles @import spécifiques à chaque média. Ces imports conditionnels comportent une liste de requête média séparées par des virgules, situées après l'URL. Si aucune requête média n'est indiquée, l'import est inconditionnel. Cela aura le même effet que d'utiliser la requête média all.

Syntaxe

@import url;
@import url liste-requetes-media;

où on a :

url

Une valeur de type <string> ou <url> qui représente l'emplacement de la ressource qu'on souhaite importer. L'URL peut être absolue ou relative. On notera que, pour un paquet Mozilla, l'URL ne pointe pas nécessairement vers un fichier, elle peut simplement définir le nom du paquet et la partie utilisée, le fichier approprié sera alors choisi automatiquement (e.g. chrome://communicator/skin/). Voir cet article pour plus d'informations.

liste-requetes-media

Une liste de requêtes média séparées par des virgules qui conditionnent l'application des règles CSS pour l'URL associée. Si le navigateur ne prend en charge aucune des requêtes indiquées, il ne charge pas la ressource associée.

Syntaxe formelle

@import = 
@import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;

<url> =
<url()> |
<src()>

<layer-name> =
<ident> [ '.' <ident> ]*

<import-conditions> =
[ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

<supports-condition> =
not <supports-in-parens> |
<supports-in-parens> [ and <supports-in-parens> ]* |
<supports-in-parens> [ or <supports-in-parens> ]*

<supports-in-parens> =
( <supports-condition> ) |
<supports-feature> |
<general-enclosed>

<supports-feature> =
<supports-decl>

<supports-decl> =
( <declaration> )

Spécifications

Specification
CSS Cascading and Inheritance Level 5
# at-import

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@import
layer()
supports() as import condition

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
See implementation notes.