---
title: '@import'
slug: Web/CSS/@import
tags:
  - CSS
  - Reference
  - Règle @
translation_of: Web/CSS/@import
---
<div>{{CSSRef}}</div>

<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> <strong><code>@import</code></strong> 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 {{cssxref("@charset")}}. <code>@import</code> n'est pas <a href="/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS">une instruction imbriquée</a> et ne peut donc pas être utilisée à l'intérieur <a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">de groupe de règles conditionnelles</a>.</p>

<pre class="brush:css no-line-numbers">@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);
</pre>

<p>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 <code>@import</code> spécifiques à chaque média. Ces imports conditionnels comportent une liste de <a href="/fr/docs/Web/CSS/Media_queries">requête média</a> 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 <code>all</code>.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">@import <em>url</em>;
@import <em>url</em> <em>liste-requetes-media</em>;
</pre>

<p>où on a :</p>

<dl>
 <dt><code>url</code></dt>
 <dd>Une valeur de type {{cssxref("&lt;string&gt;")}} ou {{cssxref("&lt;url&gt;")}} 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. <strong>chrome://communicator/skin/</strong>). <a href="/fr/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">Voir cet article</a> pour plus d'informations.</dd>
 <dt><code>liste-requetes-media</code></dt>
 <dd>Une liste de <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">requêtes média</a> 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.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}</td>
   <td>{{Spec2('CSS3 Cascade')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
   <td>{{Spec2('CSS3 Media Queries')}}</td>
   <td>Extension de la syntaxe afin de prendre en charge n'importe quelle requête média et pas uniquement <a href="/fr/docs/Web/CSS/@media#Types_de_médias">celles sur les types de média</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Prise en charge du type {{cssxref("&lt;string&gt;")}} pour indiquer l'URL d'une feuille de style. Il est désormais nécessaire d'insérer les règles <code>@import</code> au début du document CSS.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.at-rules.import")}}</p>