1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
---
title: Règles @
slug: Web/CSS/At-rule
tags:
- CSS
- Reference
- Règle @
translation_of: Web/CSS/At-rule
original_slug: Web/CSS/Règles_@
---
{{cssref}}
Une **règle @** est une [expression CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_instructions_CSS) 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 [bloc CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blocs_CSS) trouvé en premier.
```css
/* Forme générique */
@IDENTIFIANT (RÈGLE);
/* Exemple : indiquer au navigateur d'utiliser */
/* UTF-8 comme jeu de caractères */
@charset "utf-8";
```
Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :
- {{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.
- {{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.
- {{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.
- **_Les règles @ imbriquées_**. 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 :
- {{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 _media query_).
- {{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).
- {{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 _(cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)_
- {{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.
- {{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.
- {{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.
- {{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (_viewport_) _(cette règle est au stade du brouillon de travail)._
- {{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 _Candidate Recommendation_, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
- {{cssxref("@font-feature-values")}} (ainsi que `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset` et `@character-variant`) : 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 _Candidate Recommendation_, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
## Les règles de groupe conditionnelles
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 : **les règles de groupe conditionnelles**. Ces instructions partagent une syntaxe commune et permettent d'inclure des _instructions imbriquées_ (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.
Les règles de groupe conditionnelles définies par [la spécification de niveau 3 sur les règles CSS conditionnelles](https://drafts.csswg.org/css-conditional-3/) sont :
- {{cssxref("@media")}},
- {{cssxref("@supports")}},
- {{cssxref("@document")}} _(qui a été reporté à la spécification de niveau 4)._
Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.
## Spécifications
| Spécification | État | Définition |
| ------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------------- |
| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | Définition initiale. |
| {{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}} | {{Spec2('Compat')}} | Standardisation de `@-webkit-keyframes`. |
## Voir aussi
- [La référence CSS](/fr/docs/Web/CSS/Reference)
|
