Quel est le but du symbole " @ " dans le CSS?

Question

Je viens de tombé sur cette question et j'ai remarqué que l'utilisateur est à l'aide de quelques notations je n'ai jamais vu avant:

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

Alors, est-ce @ symbole de quelque chose de nouveau en CSS3, ou quelque chose de vieux que j'ai quelque peu négligé? Est-ce un peu comme avec un ID que vous utilisez #, et avec une classe que vous l'utilisez .? Google n'a pas me donner de bons articles liés à ce. Quel est le but de l' @ symbole dans le CSS?

Answer 1

@ a été autour depuis les jours de @import en CSS1, même si c'est sans doute devenir de plus en plus commun dans les récentes @media (CSS2, CSS3) et @font-face (CSS3) des constructions. L' @ de la syntaxe elle-même, cependant, n'est pas nouvelle.

Ce sont tous connus dans le CSS comme à des règles. Ils sont les instructions spéciales pour le navigateur, ne sont pas directement liés au style de (X)HTML/XML éléments dans des documents Web en utilisant des règles et des propriétés, bien qu'ils ne jouent un rôle important dans le contrôle de la façon dont les styles sont appliqués.

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 règles de définir des polices personnalisées pour les utiliser dans vos créations qui ne sont pas toujours disponibles sur tous les ordinateurs, donc un navigateur télécharge une police à partir du serveur et du texte dans cette police personnalisée comme si l'ordinateur de l'utilisateur avait la police.

• @media règles, en collaboration avec les media queries (auparavant, seuls les types de médias), le contrôle, dont les styles sont appliqués et qui ne sont pas fondées sur des médias que la page est affichée. Dans mon exemple de code, seulement lors de l'impression d'un document doit tout le texte sera mis en noir contre un blanc (le papier) en arrière-plan. Vous pouvez utiliser les media queries pour filtrer les médias imprimés, les appareils mobiles et ainsi de suite, et le style des pages différemment pour ceux.

Au-règles n'ont aucun rapport avec les sélecteurs que ce soit. En raison de leur nature variable, différentes à des règles sont définies de différentes manières à travers de nombreux modules différents. D'autres exemples comprennent:

• Règles conditionnelles
• Les animations d'images clés
• Paginé de médias

(cette liste est loin d'être exhaustive)

Vous pouvez trouver une autre liste, non exhaustive, au MDN.

Answer 2

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

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

Le ci-dessus sont appelés at-rules.

Answer 3

Un exemple de @media qui pourrait être utile pour illustrer encore plus loin:

@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 varie en fonction de la taille de l'image conditionnellement sur la taille de l'écran, à l'aide d'une petite image sur un écran de petite taille. Le premier bloc d'adresse écrans jusqu'à largeur 1440px; la seconde à l'adresse des écrans plus grands que 1440px.

Cela est très pratique avec des choses comme les onglets qui flottent déposer ou faire défiler sur les écrans plus petits; vous pouvez souvent tomber la taille de la police de l'onglet étiquettes bas une taille de point sur les petits écrans et les avoir tous.

Answer 4

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

Answer 5

Le ProBoards de style CSS utilise également ces variables.

Voici un petit snipptt 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; }

REMARQUE: ne pas natif, voir le premier commentaire.