web-dev-qa-db-fra.com

Quel est le but du symbole '@' en CSS?

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

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

Ce symbole @ représente-t-il donc quelque chose de nouveau dans CSS3 ou quelque chose d'ancien que j'ai quelque peu oublié? Est-ce que c'est quelque chose comme où avec un ID 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?

csscss3syntaxsymbols
130
Hristo

@ existe depuis l’époque de @import dans CSS1, bien qu’il devienne 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.

Celles-ci sont toutes connues en CSS sous le nom de at-rules. 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-face rules définit des polices personnalisées à utiliser dans vos conceptions qui ne sont pas toujours disponibles sur tous les ordinateurs. Un navigateur télécharge donc une police du serveur et définit le texte dans cette police personnalisée comme si la machine était dans l'ordinateur.

  • @media rules , en conjonction avec des requêtes de média (anciennement uniquement media types ), contrôlent les styles appliqués et ceux qui ne sont pas basés sur le média dans lequel la page est affichée. Par exemple, lors de l’impression d’un document, tout le texte doit être placé en noir sur un fond blanc (le papier). Vous pouvez utiliser des requêtes multimédia pour filtrer les supports d'impression, les périphériques mobiles, etc., et attribuer un style différent aux pages.

Les règles At n'ont aucun lien 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:

_ {(cette liste est loin d'être exhaustive)}

Vous pouvez trouver une autre liste non exhaustive à l’adresse MDN .

157
BoltClock

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

@import
@page
@médias
@ font-face
@ charset
@namespace

Les noms ci-dessus s'appellent at-rule s.

22
Frankie

Un exemple de @media qui pourrait être utile pour 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 conditionnellement sur la taille de l'écran, en utilisant une image plus petite sur un écran plus petit. Le premier bloc s’adresserait aux écrans d’une largeur maximale de 1440 pixels; la seconde adresserait des écrans plus grands que 1440px. 

Cela est pratique avec des choses comme les onglets qui flottent ou qui défilent sur des écrans plus petits; vous pouvez souvent laisser tomber la taille de la police des étiquettes d'onglets d'une taille en points sur des écrans plus petits et les ajuster.

7
BobRodes

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

1
r3st0r3

Le style CSS de ProBoards les utilise également comme variables.

Voici un petit extrait d'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: pas natif, voir premier commentaire.

0
Tcll