Quel est l'objectif du symbole '@' en CSS?

Question

Je viens de tombé sur this question et je remarquai l'utilisateur utilise une notation que je ne l'ai jamais vu avant:

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

est donc ce symbole @ quelque chose de nouveau dans CSS3, ou quelque chose de vieux que je suis en quelque sorte négligé? Est-ce quelque chose comme où avec un ID que vous utilisez #, et avec une classe que vous utilisez .? Google ne m'a pas donné de bons articles sur ce sujet. Quel est l'objectif du symbole @ en CSS?

Answer 1

@ a été autour depuis les jours de @import dans CSS1, bien qu'il devient de plus en plus sans doute courant dans la @media récente (CSS2, CSS3) et @font-face constructions (CSS3). La syntaxe @ elle-même, bien que, comme je l'ai mentionné, n'est pas nouvelle.

Tous ces éléments sont connus en CSS sous la forme 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 utilisant des règles et des propriétés, bien qu'ils 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éfinissent des polices personnalisées pour 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 définit le texte dans cette police personnalisée comme si l'ordinateur de l'utilisateur avait la police.

• @media rules, conjointement avec media queries (anciennement seulement media types), contrôle les styles sont appliqués et qui ne sont pas basées sur ce que les médias la page est affichée. Dans mon exemple de code, uniquement lors de l'impression d'un document doit tout le texte soit en noir sur un fond blanc (le papier). Vous pouvez utiliser des requêtes multimédias pour filtrer les supports d'impression, les périphériques mobiles, etc., et les pages de style pour celles-ci.

Les règles-at n'ont aucune relation avec selectors quoi que ce soit. En raison de leur nature variable, différentes règles d'origine sont définies de différentes manières dans de nombreux modules différents. D'autres exemples comprennent:

• Conditional rules
• Keyframe animations
• Paged media

(cette liste est loin d'être exhaustive)

Vous pouvez trouver une autre liste non exhaustive à MDN.

Answer 2

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

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

ci-dessus sont appelés at-rule s.

Answer 3

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

Answer 4

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 varie la taille de l'image sous condition de la taille de l'écran, en utilisant une image plus petite sur une plus petite écran. Le premier bloc adresserait des écrans jusqu'à la largeur 1440px; la seconde concernerait les écrans supérieurs à 1440px. Ceci est pratique avec des éléments tels que des onglets qui flottent ou défilent sur des écrans plus petits; Vous pouvez souvent réduire la taille de la police des étiquettes d'une taille de point sur des écrans plus petits et les faire correspondre.

Answer 5

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

Voici une petite snipptt d'un 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: non native, voir premier commentaire.