Les règles CSS arobase @

Nous avons déjà rencontré la syntaxe @ dans ce cours notamment dans la leçon sur les media queries avec la règle @media.

Les règles @ ou “règles at” ou encore “règles arobase” permettent de fournir des instructions au CSS en tant que langage sur la façon dont il doit se comporter et sur la façon dont il doit réaliser certaines opérations.

Les règles @ CSS sont toutes construites de la même manière : elles sont composées du signe @ suivi d’un nom (un mot clef ou encore un identifiant) qui indique le type de règle pour lequel on va donner des instructions suivi par la règle en soi. La forme est donc la suivante : @type-de-regle valeur-de-la-regle.

 

Liste des règles @ CSS et définitions

Les règles globales

Le CSS possède à ce jour 3 règles @ globales qui sont les suivantes :

• La règle @charset permet de définir le jeu de caractères utilisé par la feuille de style ;
• La règle @import permet d’importer une feuille de styles externe dans la feuille courante ;
• La règle @namespace permet principalement d’indiquer 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

En plus de ces trois règles globales, le CSS possède également de nombreuses règles appelées “règles imbriquées” car elles nous permettent d’inclure des déclarations imbriquées supplémentaires.

Parmi ces règles imbriquées, nous disposons notamment d’un ensemble de 4 règles qu’on groupe généralement sous l’appellation “règles de groupe conditionnelles” car elles ont un mode de fonctionnement similaire : elles définissent toutes trois une certaine condition qui, selon qu’elle est évaluée à vrai ou à faux, permettre d’appliquer les instructions imbriquées du groupe. Ces trois règles sont les suivantes :

• La règle @media permet d’appliquer des styles aux éléments seulement si l’appareil utilisé répond aux conditions fournies dans la règle ;
• La règle @supports permet d’appliquer des styles si le navigateur respecte une condition donnée ;
• La règle @document permet d’appliquer des styles à une page ou à un ensemble de pages spécifiques, c’est-à-dire à un document s’il respecte une condition donnée ;
• La règle @viewport permet d’appliquer certains styles si la zone d’affichage (viewport) respecte une condition donnée.

Les autres règles imbriquées sont les suivantes :

• La règle @keyframes permet de définir les étapes d’une animation ;
• La règle @font-face permet de télécharger des polices externes dans une page ;
• La règle @page permet d’indiquer une disposition à appliquer pour l’impression de la page ;
• La règle @counter-style permet de définir des styles de compteurs personnalisés pour les listes ;
• Les règles @font-feature-values, @swash, @ornaments, @annotation, @stylistic, @styleset et @character-variantpermettent de définir des noms d’usages pour la propriété font-variant-alternates qui contrôle l’utilisation de glyphes alternatifs.