CSS: Le "at-rules"

Sono regole particolari, costrutti introdotti dal simbolo della chiocciola @, e si pronunciano come "at-". Svolgono funzioni particolari, spesso eseguibili anche in altro modo. Un classico è la direttiva @import per importare un foglio di stile esterno per un documento html.

Sintatticamente, le @-rules vanno poste nel corpo del documento all'interno del tag style.

@media
Questa direttiva "pilota" il foglio di stile opportuno in base al tipo di media con il quale si sta fruendo della pagina web o del sito. Un esempio:

Si noti come in presenza di un monitor il colore di h1 sia nero; per la stampa esso diventerà rosso. E viceversa per il paragrafo.

@charset
Questa direttiva va direttamente a sostituire il tradizionale meta-tag usato nella head del documento html per dichiarare il set di caratteri da usare.

meta http-equiv="Content-Type" content="text/html; utf-8"

Ecco la stessa funzionalità con la @rule:

@charset "utf-8"


@font face
Ed ecco quello che mi aveva fatto sobbalzare sulla sedia in primo momento. Questa direttiva sembrava la panacea per la soluzione dei problemi relativi all'uso di fonts particolari per la presentazione grafica di un sito...
La direttiva può essere usata per descrivere un font usato nel documento. È un argomento molto complesso e conoscere i dettagli della questione non aggiunge nulla che possa davvero accrescere la vostra conoscenza dei CSS. In genere potrebbe essere usata per specificare l'url di un carattere particolare da scaricare su una macchina che non lo veda presente tra i suoi font. La sintassi classica è infatti questa:

@font-face {
font-family: GraublauWeb;
src: url(GraublauWeb.otf) format(truetype);
}

Leggendo una cosa come questa si potrebbe pensare che tramite foglio di stile viene importato il font necessario alla corretta visualizzazione della pagina; è bello in teoria. In pratica, il supporto non è garantito, e l'utilità effettiva è poco più che nulla. Meglio quindi affidarsi alle vecchie e care famiglie presenti su tutti i sistemi operativi: verdana, arial, helvetica e compagnia.