Les directives en CSS.
Que sont les directives CSS ?
Les directives CSS commencent toutes par le signe @ (d'où leur nom anglais at-rule). Ce sont les instructions de
plus haut niveau en CSS. Le plus souvent, leur usage est de définir un élément qui sera réutilisé ensuite dans des règles CSS classiques.
Mais elles ont d'autres usages :
- Directives pour le traitement du reste de la feuille de styles. C'est le cas par exemple de
@charset. - Importer une autre feuille de styles :
@import. - Les directives peuvent introduire un peu d'algorithmie en CSS, comme avec
@supports,@when ... @else,@media, etc. - Définir des éléments réutilisables ensuite :
@keyframes,@counter-style,@font-face, etc. - Enfin, une directive se comporte comme un sélecteur :
@page.
Liste des directives en CSS.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
@charset
Indique le jeu de caractères utilisé dans la feuille de styles.
Directive CSS @apply
@apply
Applique un groupe de propriétés préalablement définies.
Media Queries
@custom-media
Définit une requête-média personnalisée.
@media
Affectation de règles CSS en fonction du périphérique (smartphone, écran de bureau, etc...).
Module CSS - Adaptation du terminal
@viewport
Définit les caractéristiques de la fenêtre d'affichage. Cette directive est une alternative à la balise HTML meta du même nom.
Module CSS - Animations
@keyframes
Définit le nom d'une animation et quelles sont les propriétés qui sont animées.
Module CSS - Cascade et héritage
@import
Importation d'une feuille de styles.
@layer
Définit les couches de cascade (layer) pour faciliter la gestion des priorités entre les règles CSS.
Module CSS - Confinement
@container
Permet d'écrire des règles CSS conditionnelles en fonction des caratéristiques du conteneur.
Module CSS - Couleurs
@color-profile
Spécifie un profil colorimétrique qui pourra ensuite être utilisé par la fonction
color().Module CSS - Media paginé
@page
Caractéristiques de la page, à l'impression.
Module CSS - Polices de caractères
@font-face
Définit tous les paramètres d'une police de caractères téléchargeable.
@font-feature-values
Définit les variantes typographiques à utiliser.
@font-palette-values
Définit une palette de couleurs applicable ensuite à une police de caractères.
Module CSS - Règles conditionnelles
@else
Complète la directive
@when. Définit des règles CSS qui ne seront traitées que sous certaines conditions.@supports
Teste la compatibilité du navigateur avec la syntaxe indiquée.
@when
Définit des règles CSS conditionnelles, qui ne seront traitées que sous certaines conditions.
Module CSS - Styles de compteurs
@counter-style
Création d'un compteur personnalisé.
Module CSS - Transitions d'afichage
@view-transition
Active ou désactive les transitions d'affichage entre les pages.