Règles @
Les règles @ sont des instructions CSS qui indiquent au CSS comment se comporter. Elles commencent par un arobase, @ (U+0040 COMMERCIAL AT), suivi d'un identifiant. Elles incluent tout ce qui va du mot-clé @ jusqu'au prochain point-virgule, ; (U+003B SEMICOLON), ou au prochain bloc CSS, selon ce qui vient en premier.
Les règles @ servent à regrouper et structurer des règles de style et d'autres règles @, à déclarer des informations de style non directement associées au contenu sélectionné, et à gérer des constructions syntaxiques comme les imports et les mappages de mots-clés de namespace.
Syntaxe
La règle @ est définie dans le module de Syntaxe CSS, chaque règle @ étant définie dans son module respectif. Elles prennent généralement l'une des deux formes suivantes selon la règle et son objectif : les règles @ de déclaration et les règles @ de bloc, qui peuvent contenir des règles qualifiées imbriquées, d'autres règles @ ou des déclarations.
Règles @ de déclaration
/* Structure générale */
@identifiant (RÈGLE);
/* Exemple : indique au navigateur d'utiliser l'encodage UTF-8 */
@charset "utf-8";
Les règles @ de déclaration se terminent par un point-virgule. Il existe plusieurs règles @ de déclaration, désignées par leur identifiant, chacune ayant une syntaxe différente :
@charset-
Un algorithme (ayant la forme syntaxique d'une règle @, mais n'étant pas une définition) qui détermine l'encodage de secours utilisé par la feuille de style (Syntaxe CSS).
@import-
Indique au moteur CSS d'inclure une feuille de style externe (Cascade et héritage CSS).
@layer-
Définit l'ordre de priorité en cas de couches de cascade multiples (Cascade et héritage CSS). Utilisée aussi comme règle @ de bloc pour définir les styles d'une couche.
@namespace-
Définit un namespace par défaut pour une feuille de style ou un préfixe de namespace qu'un sélecteur ne correspond que si le namespace et les autres composants du sélecteur correspondent (Namespaces CSS).
Règles @ de bloc
@identifiant (RÈGLE) {
}
Les règles @ de bloc se terminent par un bloc {} qui contient des règles imbriquées, d'autres règles @, ou des déclarations de propriétés ou de descripteurs.
@counter-style-
Définit des styles de compteur personnalisés et étend les styles de liste prédéfinis (Styles de compteur CSS).
@container-
Règle conditionnelle de groupe qui applique son contenu si le conteneur satisfait la
<container-condition>(CSS containment). @font-face-
Définit les emplacements des ressources de police, locales et externes, ainsi que les caractéristiques de style pour l'utilisation de ces ressources avec une
font-familydéclarée (Polices CSS). @font-feature-values(ainsi que@swash,@ornaments,@annotation,@stylistic,@stylesetet@character-variant)-
Contrôle l'affichage des polices par famille en définissant des variantes spécifiques ou des noms personnalisés pour les index de fonctionnalités dans
font-variant-alternatesen OpenType (Polices CSS). @keyframes(et l'alias@-webkit-keyframes)-
Définit une animation nommée en décrivant les styles CSS pour les étapes intermédiaires (ou keyframes) de la séquence d'animation (Animations CSS).
@layer-
Crée une couche de cascade nommée avec les règles CSS pour cette couche (Cascade et héritage CSS). Utilisée aussi comme règle @ de déclaration pour définir l'ordre de priorité en cas de couches multiples.
@media-
Règle conditionnelle de groupe qui applique son contenu si le périphérique satisfait la condition définie par une requête média (Règles conditionnelles CSS).
@page-
Spécifie les aspects d'une page à imprimer, comme ses dimensions, son orientation et ses marges (Média paginé CSS).
@position-try-
Définit des options de position personnalisées pouvant servir à définir des options de positionnement et d'alignement de secours pour les éléments ancrés (Positionnement d'ancre CSS).
@property-
Définit une propriété personnalisée CSS, permettant la vérification de type, la contrainte, la définition de valeurs par défaut et le contrôle de l'héritage (Propriétés personnalisées pour les variables CSS).
@scope-
Définit une portée dans laquelle appliquer des styles à des éléments sélectionnés (Cascade et héritage CSS).
@starting-style-
Définit les valeurs de propriété initiales pour un élément lors de sa première mise à jour de style, par exemple lors d'une transition depuis
display: none(Transitions CSS). @supports-
Règle conditionnelle de groupe qui applique son contenu si le navigateur prend en charge les fonctionnalités CSS de la condition donnée (Règles conditionnelles CSS).
@view-transition-
Active la transition de vue pour le document courant (API View Transition), et pour le document de destination lors d'une navigation inter-document.
Index
Spécifications
| Specification |
|---|
| CSS Syntax Module Level 3 |