MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

Une règle @ est une expression 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 trouvé en premier.

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

  • @charset qui définit le jeu de caractères utilisé par la feuille de style.
  • @import qui indique au moteur de rendu d'inclure une feuille de style externe.
  • @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 :
    • @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).
    • @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).
    • @document : 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)
    • @page : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.
    • @font-face : une règle qui définit une police externe à télécharger.
    • @keyframes : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.
    • @viewport : 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).
    • @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)
    • @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é 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 sont :

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
CSS Conditional Rules Module Level 3 Candidat au statut de recommandation Définition initiale.
Compatibility Standard
La définition de 'CSS At-rules' dans cette spécification.
Standard évolutif Standardisation de @-webkit-keyframes.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, loella16, brikou, ValentinLevalet, Chealer, teoli, naar, FredB
 Dernière mise à jour par : SphinxKnight,