À quoi sert le symbole «@» dans CSS?

Je suis juste tombé sur cette question et j'ai remarqué que l'utilisateur utilise une notation que je n'ai jamais vue auparavant:

@font-face {
   /* CSS HERE */
}

Alors, ce @symbole est-il quelque chose de nouveau dans CSS3, ou quelque chose d'ancien que j'ai en quelque sorte oublié? Est-ce quelque chose comme où avec un identifiant que vous utilisez #et avec une classe que vous utilisez .? Google ne m'a pas donné de bons articles à ce sujet. Quel est le but du @symbole en CSS?

@existe depuis les jours de @importCSS1, même si cela devient de plus en plus courant dans les constructions récentes @media(CSS2, CSS3) et @font-face(CSS3). La @syntaxe elle-même, cependant, comme je l'ai mentionné, n'est pas nouvelle.

Ceux-ci sont tous connus en CSS sous le nom de règles at . Ce sont des instructions spéciales pour le navigateur, qui ne sont pas directement liées au style des éléments (X) HTML / XML dans les documents Web à l'aide de règles et de propriétés, bien qu'elles jouent un rôle important dans le contrôle de l'application des styles.

Quelques exemples de code:

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

• @font-faceles règles définissent des polices personnalisées à utiliser dans vos conceptions qui ne sont pas toujours disponibles sur tous les ordinateurs, de sorte qu'un navigateur télécharge une police à partir du serveur et définit le texte dans cette police personnalisée comme si l'ordinateur de l'utilisateur possédait la police.

• @media règles , en conjonction avec les requêtes multimédias (anciennement uniquement les types de supports ), contrôlent les styles appliqués et ceux qui ne sont pas basés sur le support sur lequel la page est affichée. Dans mon exemple de code, ce n'est que lors de l'impression d'un document que tout le texte doit être défini en noir sur fond blanc (le papier). Vous pouvez utiliser les requêtes multimédias pour filtrer les médias imprimés, les appareils mobiles, etc., et styliser les pages différemment pour ceux-ci.

Les règles At n'ont aucun rapport avec les sélecteurs . En raison de leur nature variable, différentes règles at sont définies de différentes manières dans de nombreux modules différents. D'autres exemples incluent:

• Règles conditionnelles
• Animations d'images clés
• Médias paginés

(cette liste est loin d'être exhaustive)

Vous pouvez trouver une autre liste non exhaustive sur MDN .

@ est utilisé pour définir une règle.

@import
@page
@media
@ font-face
@charset
@namespace

Ce qui précède est appelé at-rules.

Un exemple de @media qui pourrait être utile pour l'illustrer davantage:

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

Cela fera varier la taille de l'image de manière conditionnelle sur la taille de l'écran, en utilisant une image plus petite sur un écran plus petit. Le premier bloc adresserait des écrans jusqu'à une largeur de 1440 px; le second adresserait des écrans de plus de 1440 pixels.

Cela est pratique avec des éléments tels que des onglets qui flottent ou qui défilent sur des écrans plus petits; vous pouvez souvent réduire la taille de la police des étiquettes des onglets d'une taille en points sur des écrans plus petits et les faire rentrer toutes.

@ est utilisé comme spécification de règle. Comme@font-face

Le style CSS ProBoards les utilise également comme variables.

Voici un petit extrait de l'une de leurs pages CSS:

@wrapper_width: 980px;
@link_color: #c06806;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

NOTE: non natif, voir premier commentaire.