Définies dans le spécification CSS Conditional Rules Module Level 3, les règles@ sont utilisées pour transmettre des informations conditionnelles.
Elles commencent par le symbole @, suivi d'un mot-clé servant d'identifiant afin de préciser le type de règle. Selon le type de celle-ci, la syntaxe ainsi que la sémantique varient. Ci-dessous, un exemple basique d'une règle @ :
@charset "utf-8";
@charset :Cette règle @ permet de définir le jeu de caractères utilisé dans une feuille de style.
Surtout utile dans le cas des caractères qui ne sont pas codés en ASCII (FR) pour certaines propriétés CSS (avec par exemple la propriété content et les pseudo-éléments ::before et ::after).
@import :Cette règle @ permet d'importer une feuille de style externe. Très utile si l'on veut inclure des ressources pour un média en particulier. Pourtant son utilisation est déconseillée pour des questions de performances.
@namespace :Cette règle @ va permettre d'appliquer du CSS à des éléments xHTML. Ceux-ci vont devenir en quelque sorte des sélecteurs CSS. Néanmoins, avec l'arrivée de HTML5 et la possibilité de pouvoir écrire en ligne du langage SVG ou MathML (tous deux basés sur XML), il est fort peu probable que vous utilisiez cette règle @.
Voici un exemple :
@namespace svg "http://www.w3.org/2000/svg";
svg|a {
fill: blue
} /* le lien du svg sera de couleur bleue */
svg|path {
fill: red
} /* les chemins du svg auront la couleur rouge */
Voici l'ordre dans lequel ces trois régles doivent être déclarées :
@charset "utf-8"; /*toujours en première position*/
@import "style.css";/*toujours après la règle ci-dessus*/
@namespace svg "http://www.w3.org/2000/svg";/*doit toujours se positionner après les deux règles ci-dessus*/
Il existe un sous-ensemble de règles (on parle alors de règles @ imbriquées). Contrairement aux règles @ citées ci-dessus qu'il faut insérer au début de la feuille de style, il est possible de les inclure à n'importe quel endroit (d'où le terme imbriqué).
@media :Cette règle de groupe conditionnelle permet d'inclure des blocs d'instruction selon le type de média (écrans, impression papier ou encore synthétiseurs vocaux). Certains types ont été abandonnés (tv, projection, braille...), d'autres vont voir le jour dans le quatrième niveau du module des media queries avec son lot de caractéristiques (EN).
/* on vise la version papier*/
@media print {
body {
font-size: 15pt
}
}
/* on applique une requête pour les écrans en couleurs */
@media screen {
body {
font-size: 1rem
}
}
/* on vise les écrans en couleurs ainsi que la version papier*/
@media screen, print {
body {
line-height: 1.2
}
}
/* ici on vise les médias dont la largeur est au minimum de 1004px */
@media (min-width:62.75rem){
body {
font-size:1.25rem
}
}
/* ici on vise les écrans en couleurs et dont la largeur est au minimum de 1004px */
@media screen and (min-width:62.75rem){
body {
font-size:1.5rem
}
}
@supports :Cette règle de groupe conditionnelle permet de vérifier si un navigateur prend en charge une propriété CSS.
/*les navigateurs ne supportant pas cette propriété vont ignorer cette règle*/
@supports (display:grid) {
div {display: grid}
}
/*on peut déclarer plusieurs valeurs*/
@supports (display: flex) and (filter:drop-shadow(0 0 5px #000)) {
...
}
/*on peut tester le support d’une propriété préfixée*/
@supports (background-clip:text) or (-webkit-background-clip:text) {
...
}
/*si les navigateurs ne supportent pas cette propriété alors ceux-ci vont appliquer l'autre règle*/
@supports not (display: flex) {
div {float: left}
}
@document :Cette règle, qui fera partie du quatrième niveau, permet de spécifier des règles qui s'appliquent uniquement à certaines pages d'un document.
/* vise une page spécifique */
@document url(http://votre_site.com) {
...
}
/* pour les pages commencant par cette url */
@document url-prefix(http://votre_site.com/dossier/) {
...
}
/* toutes les pages appartenant au nom de domaine */
@document domain(votre_site.com) {
...
}
/*toute page commencant par https*/
@document regexp("https:.*") {
}
/* il est possible d'associer plusieurs règles */
@document url-prefix(..), domain(..) {
...
}
@page :Cette règle, définie dans la spécification CSS Level 2 (Revision 1), permet de créer la mise en page d'un document qui doit être imprimé et/ou paginé.
Cependant, celle-ci ne prend en charge que peu de propriétés CSS et agit uniquement pour les marges, les sauts de page, la taille ou encore l'orientation de la page.
@page {
margin: 1cm;
}
Il existe, par ailleurs, des pseudo-classes spécifiques à cette règle, à savoir :
:blank (Fonctionnalité expérimentale):first : pour la mise en forme de la première page du document à imprimer.:left : permet de cibler les pages de gauche.:right : permet de cibler les pages de droite.:recto (Fonctionnalité expérimentale):verso (Fonctionnalité expérimentale)
@page :first {
margin-left: 50%;
}
@page :left {
margin-left: 3cm;
margin-right: 4cm;
}
@page :right {
margin-left: 4cm;
margin-right: 3cm;
}
@font-face :La propriété font-family peut être associée à la règle @font-face. Si vous souhaitez mettre en place une police de caractères plus originale, voici comment s'y prendre :
Rendez-vous sur Google fonts ou sur Fontsquirrel. Vous choisissez une police. Pour l'exemple, nous prendrons la police Lato.
Sur Google Fonts, vous récupérez le lien où se trouve la police. Il doit ressembler à ceci :
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
Soit vous mettez ce code directement dans votre document (entre <head> et </head>), soit vous récupérez la CSS associée et vous l'intégrez à votre propre feuille CSS. Pour récupérer la police de caractères, ouvrez un onglet dans votre navigateur et prenez dans le code Google cette partie :
https://fonts.googleapis.com/css?family=Lato
Vous devriez voir ceci :
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/lato/v22/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/lato/v22/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Copiez puis collez ce code dans votre feuille de style. Avec cette méthode, inutile de mettre le lien dans l'entête de votre document.
Sur FontSquirrel, il vous suffit de choisir une police et de la télécharger. Vous avez également la possibilité d'uploader une fonte en .ttf et vous obtiendrez différents formats (.eot, .svg, .woff) ceci pour la compatibilité entre navigateurs.
Cette règle, qui fait partie de CSS Fonts Module Level 3, permet de charger une police personnalisée dans un document HTML. Attention toutefois à ne pas en abuser pour des raisons de performance mais aussi visuelles. Vous ne devriez utiliser que deux voire trois polices au maximum sur votre site.
@keyframes :Cette règle permet de définir les différentes étapes, plus ou moins avec précision, qui constituent une animation CSS.
@viewport :Cette règle (au stade de brouillon de travail) permet de définir des règles selon la zone d'affichage.
@viewport {
width: device-width;/*correspond à la largeur de l'écran en pixels CSS à l'échelle 100%*/
}
@counter-style : Cette règle permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis.
Ci-dessous un exemple (support partiel Firefox seulement) :
Le code de l'exemple :
@counter-style chiffre-romain {
system: additive;
range: 1 10;
additive-symbols:10 X, 9 IX, 5 V, 4 IV, 1 I;
}
/*on met le nom donné à la règle après la propriété*/
.exemple_count{
list-style: chiffre-romain
}
@font-feature-values :La règle@ @font-feature-values permet d'utiliser un nom personnalisé dans une règle. C'est la propriété font-variant-alternates qui va se charger d'effectuer des réglages propres au format OpenType.
Il existe différents types de glyphes alternatifs qui vont être définis avec la propriété font-variant-alternates :
@stylistic via la fonction du même nom : stylistic()@styleset via la fonction du même nom : styleset()@character-variant via la fonction du même nom : character-variant()@swash via la fonction du même nom : swash()@ornament via la fonction du même nom : ornament()@annotation via la fonction du même nom : annotation()On déclare la règle @ @font-feature-values comme ceci :
@font-feature-values nomPolice {
@styleset {
...
}
}
Plus d'informations dans cet article(EN).
@counter-style (EN).@viewport (EN).@document (EN).@supports (FR).