CSS  »  Guide  »  Guida CSS di base 

Le cosiddette @-rules sono tipi particolari di costrutti che hanno una caratteristica comune: sono tutti introdotti dal simbolo della chiocciola. La pronuncia è identica a quella usata per gli indirizzi e-mail, ovvero at-import, at-media, etc.

Per quanto riguarda la funzione rappresentano vie alternative, ma spesso più flessibili e potenti, per realizzare cose attuabili in altri modi. Abbiamo già visto, nella lezione dedicata a come "inserire i css in un documento", come il costrutto @import sia una valida alternativa all'elemento <LINK> per collegare fogli di stile esterni.

A livello sintattico le @-rules posono essere definite o nel corpo del documento, per l'esattezza all'interno dell'elemento <STYLE>:

<style type="text/css">
@rule
</style>

o direttamente nel codice di un CSS esterno.

Ognuna delle diverse @-rules presenta poi scopi e criteri diversi di costruzione. Esaminiamoli.

@import

@import viene usata innanzitutto per collegare un foglio di stile esterno al documento. La sintassi generica è la seguente:

<style type="text/css">
@import url(foglio_di_stile.css);
</style>

Come si vede la direttiva è accompagnata dall'indicazione url che precede l'indirizzo del CSS. Questo è racchiuso tra parentesi tonde. La @-rule deve presentare alla fine il punto e virgola di chiusura.

Altre possibili sintassi, accettate dai browser recenti, ma problematiche con quelli più datati:

URL con virgolette:

@import url("stile.css");

Direttiva senza l'indicazione url:

@import "stile.css";

L'url del foglio di stile può essere relativo, come negli esempi precedente, o assoluto, come in questo:

<style type="text/css">
@import url(http://www.miosito.it/foglio_di_stile.css);
</style>

Un principio fondamentale è che all'interno del tag <STYLE> @import deve essere la prima regola definita. In pratica, se si scrive così la direttiva non funzionerà e il CSS non sarà caricato in quanto @import è preceduta da una regola che applica uno stile all'elemento <H1>:

<style type="text/css">
h1 { color: black; }
@import url(foglio_di_stile.css);
</style>

Il modo giusto è dunque questo:

<style type="text/css">
@import url(foglio_di_stile.css);
h1 { color: black; }
</style>

È possibile invece importare all'interno di un singolo tag <STYLE> più fogli di stile:

<style type="text/css">
@import url(foglio_di_stile.css);
@import url(foglio_di_stile2.css);
</style>

Le regole di tutti i CSS collegati in questo modo saranno applicate al documento secondo l'ordine e i criteri stabiliti dalle norme sull'importanza e la specificità che vedremo tra poco in una prossima lezione.

Un uso interessante di @import è che può essere usata anche all'interno di un foglio di stile per incorporare un altro CSS esterno:

@import url(foglio.css)
h1 { color: black; }

Supponendo che questo sia un CSS, avremo il risultato di incorporare al suo interno il contenuto del secondo foglio di stile (foglio.css). Si veda la pagina di esempio.

È possibile definire all'interno della direttiva @import anche il supporto cui applicare il CSS, in modo simile a quanto abbiamo visto a proposito dell'attributo media. Per fare ciò basta far seguire all'url del CSS l'indicazione di uno dei media previsti nella specifica:

<style type="text/css">
@import url(foglio_stampa.css) print;
@import url(foglio_schermo.css) screen, handheld;
</style>

@media

Lo stesso risultato (un CSS per ogni dispositivo) si può ottenere con la direttiva @media. La sintassi generica è questa:

@media <valore> {regole CSS}

@media va quindi seguito dal nome di uno dei supporti scelti come target specifico e dalle regole di stile racchiuse tra parentesi graffe. Esempio:

<style type="text/css">
@media screen {
h1 {color: black;}
p {color: red;}
}
@media print {
h1 {color: red;}
p {color: black;}
}
</style>

Anche questo costrutto va inserito, come si vede, all'interno del tag <STYLE>. Un uso più potente, però, è quello di inserire la direttiva nel codice di un foglio esterno. Immaginate di avere un foglio di stile per formattare le vostre pagine e che vogliate impostare colori diversi per un elemento a seconda che si visualizzi il testo sullo schermo o su carta stampata. Invece di costruire due fogli di stile potete creare in un solo CSS esterno queste regole e diversificare l'aspetto dell'elemento:

@media print {
h1 {
color: black;
}
}
@media screen {
h1 {
color: red;
}
}

I risultati li potete valutare in questo documento.

@charset

La direttiva @charset serve a specificare l'impostazione relativa alla codifica dei caratteri di un documento. Svolge in pratica la stessa funzione che in (X)HTML è possibile ottenere con l'uso dei meta-tag:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

La sintassi è semplicissima:

@charset "iso-8859-1"

La direttiva non può essere usata in fogli incorporati. Quando si vuole usarla in un foglio esterno essa deve essere la prima dichiarazione del CSS.

@font-face

La direttiva @font-face 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: Santiago;
src: url("http://www.mioserver.it/fonts/santiago.tt");
}

Il supporto non è garantito e l'utilità effettiva poco più che nulla.

Altri articoli

Altre guide

Altre newsletter