Qual è lo scopo del simbolo "@" nei CSS?

Mi sono appena imbattuto in questa domanda e ho notato che l'utente sta usando una notazione che non avevo mai visto prima:

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

Quindi questo @simbolo è qualcosa di nuovo in CSS3 o qualcosa di vecchio che in qualche modo ho trascurato? È qualcosa di simile a dove con un ID che usi #e con una classe che usi .? Google non mi ha dato buoni articoli in merito. Qual è lo scopo del @simbolo nei CSS?

@è in circolazione dai tempi di @importCSS1, anche se probabilmente sta diventando sempre più comune nei recenti costrutti @media(CSS2, CSS3) e @font-face(CSS3). La @stessa sintassi, tuttavia, come ho già detto, non è nuova.

Questi sono tutti noti nei CSS come regole . Sono istruzioni speciali per il browser, non direttamente correlate allo stile degli elementi (X) HTML / XML nei documenti Web che utilizzano regole e proprietà, sebbene svolgano ruoli importanti nel controllo dell'applicazione degli stili.

Alcuni esempi di codice:

/* 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-facele regole definiscono i caratteri personalizzati da utilizzare nei progetti che non sono sempre disponibili su tutti i computer, quindi un browser scarica un carattere dal server e imposta il testo in quel carattere personalizzato come se il computer dell'utente avesse il carattere.

• @mediale regole , in combinazione con le media query (precedentemente solo tipi di media ), controllano quali stili sono applicati e quali non sono basati su quale supporto la pagina viene visualizzata. Nel mio esempio di codice, solo quando si stampa un documento dovrebbe essere impostato tutto il testo in nero su uno sfondo bianco (la carta). È possibile utilizzare le query multimediali per filtrare i supporti di stampa, i dispositivi mobili e così via e personalizzare le pagine in modo diverso.

Le regole At non hanno alcun rapporto con i selettori . A causa della loro natura variabile, diverse regole at sono definite in modi diversi attraverso numerosi moduli diversi. Altri esempi includono:

• Regole condizionali
• Animazioni di fotogrammi chiave
• Media paginati

(questo elenco è lungi dall'essere esaustivo)

Puoi trovare un altro elenco non esaustivo su MDN .

@ è usato per definire una regola.

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

Quanto sopra si chiama at-rules.

Un esempio di @media che potrebbe essere utile per illustrarlo ulteriormente:

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

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

Ciò varierà le dimensioni dell'immagine in modo condizionale rispetto alle dimensioni dello schermo, usando un'immagine più piccola su uno schermo più piccolo. Il primo blocco indirizzerebbe gli schermi fino a una larghezza di 1440 px; il secondo riguarderebbe schermi di dimensioni superiori a 1440 px.

Questo è utile con cose come schede che fluttuano o scorrono su schermi più piccoli; spesso è possibile ridurre la dimensione del carattere delle etichette delle schede di una dimensione in punti su schermi più piccoli e adattarli tutti.

@ viene utilizzato come specifica della regola. Piace@font-face

Lo stile CSS di ProBoards li usa anche come variabili.

Ecco un piccolo frammento di una delle loro pagine 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; }

NOTA: non nativo, vedi primo commento.