80. 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.

/*Ensemble de caractères utilisés : utf-8*/
@charset « UTF-8 »;

/*Syntaxe pour inclure un fichier nommé styles.css*/
@import « styles.css »;

/*Namespace pour xhtml*/
@namespace url(https://www.w3.org/1999/xhtml);



/*Namespace pour svg*/
@namespace svg url(https://www.w3.org/2000/svg);

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.

@document url(« https://alegorix.coach/accueil.php »){
/*Règles pour cette page en particulier*/
}

@document url-prefix(« https://alegorix.coach/cours/ »){
/*Règles pour toutes les pages qui commencent par cette url*/
}

@document domain(« alegorix.coach »){
/*Règles pour toutes les pages du domaine*/
}

@supports (display: grid){
/*Règles pour tous les navigateurs qui supportent display: grid*/
}

@supports not (display: grid){
/*Règles pour tous les navigateurs qui ne supportent pas display: grid*/
}

@supports (display: flex) and (display: grid){
/*Règles pour tous les navigateurs qui supportent display: flex et display: grid*/
}






@viewport{
        min-width: 680px;
        max-width: 960px;
        zoom: 1;
        min-zoom: 0.5;
        max-zoom: 1.5;
        orientation: auto;
}

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, @stylesetet @character-variantpermettent de définir des noms d’usages pour la propriété font-variant-alternates qui contrôle l’utilisation de glyphes alternatifs.