---
title: Règles @
slug: Web/CSS/Règles_@
tags:
  - CSS
  - Reference
  - Règle @
translation_of: Web/CSS/At-rule
---
<div>{{cssref}}</div>

<p>Une <strong>règle @</strong> est une <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_instructions_CSS">expression CSS</a> commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blocs_CSS">bloc CSS</a> trouvé en premier.</p>

<pre class="brush: css">/* Forme générique */
@IDENTIFIANT (RÈGLE);

/* Exemple : indiquer au navigateur d'utiliser */
/* UTF-8 comme jeu de caractères */
@charset "utf-8";</pre>

<p>Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :</p>

<ul>
 <li>{{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.</li>
 <li>{{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.</li>
 <li>{{cssxref("@namespace")}} qui indique au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.</li>
 <li><strong><em>Les règles @ imbriquées</em></strong>. Ces règles sont un sous-ensemble des instructions imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles :
  <ul>
   <li>{{cssxref("@media")}} : une règle de groupe conditionnelle qui applique son contenu si l'appareil utilisé respecte les critères définis dans la « requête média » (ou <em>media query</em>).</li>
   <li>{{cssxref("@supports")}} : une règle de groupe conditionnelle qui applique son contenu si le navigateur respecte une condition donnée (par exemple, si le navigateur supporte tel élément de syntaxe).</li>
   <li>{{cssxref("@document")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu si le document sur lequel s'applique la feuille de style respecte une condition donnée <em>(cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)</em></li>
   <li>{{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.</li>
   <li>{{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.</li>
   <li>{{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.</li>
   <li>{{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (<em>viewport</em>) <em>(cette règle est au stade du brouillon de travail).</em></li>
   <li>{{cssxref("@counter-style")}} : une règle qui permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis (bien que la spécification ait atteint le niveau de <em>Candidate Recommendation</em>, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)</li>
   <li>{{cssxref("@font-feature-values")}} (ainsi que <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> et <code>@character-variant</code>) : ces règles permettent de définir des noms d'usages pour la propriété {{cssxref("font-variant-alternates")}} qui permet d'activer différentes caractéristiques des polices OpenType (bien que la spécification ait atteint le niveau de <em>Candidate Recommendation</em>, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)</li>
  </ul>
 </li>
</ul>

<h2 id="Les_règles_de_groupe_conditionnelles">Les règles de groupe conditionnelles</h2>

<p>Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : <strong>les règles de groupe conditionnelles</strong>. Ces instructions partagent une syntaxe commune et permettent d'inclure des <em>instructions imbriquées </em>(soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.</p>

<p>Les règles de groupe conditionnelles définies par <a href="https://drafts.csswg.org/css-conditional-3/">la spécification de niveau 3 sur les règles CSS conditionnelles</a> sont :</p>

<ul>
 <li>{{cssxref("@media")}},</li>
 <li>{{cssxref("@supports")}},</li>
 <li>{{cssxref("@document")}} <em>(qui a été reporté à la spécification de niveau 4).</em></li>
</ul>

<p>Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.</p>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Définition</th>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Conditional')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td>Définition initiale.</td>
  </tr>
  <tr>
   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td>Standardisation de <code>@-webkit-keyframes</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
</ul>