Règles @

Lesrègles @ sont desinstructions 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 prochainbloc 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 deSyntaxe 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

css

/* Structure générale */@identifiant (RÈGLE);/* Exemple&nbsp;: 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 commerè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

css

@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 unefont-family déclarée (Polices CSS).
@font-feature-values (ainsi que@swash,@ornaments,@annotation,@stylistic,@styleset et@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 dansfont-variant-alternates en 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 commerè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 unerequê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 uneproprié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 depuisdisplay: 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.