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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
---
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_@
---
<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>
|
