Le @-rules | Guida CSS

Le=20 @-rules

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

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

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

o direttamente nel codice di un CSS esterno.

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

@import

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

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

Altre possibili sintassi, accettate dai browser recenti, = ma=20 problematiche con quelli pi=F9 datati:

URL con virgolette:

@import url("stile.css");

Direttiva senza l'indicazione url:

@import "stile.css";

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

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

Il modo giusto =E8 dunque questo:

=C8 possibile invece importare all'interno di un singolo = tag=20 <STYLE> pi=F9 fogli di stile:

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

Un uso interessante di @import =E8 che pu=F2 essere usata = anche=20 all'interno di un foglio di stile per incorporare un altro = CSS=20 esterno:

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

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

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

@media

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

@media <valore> {regole CSS}

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

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

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

I risultati li potete valutare in questo documento.

@charset

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

La sintassi =E8 semplicissima:

@charset "iso-8859-1"

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

@font-face

La direttiva @font-face pu=F2 essere usata per = descrivere un=20 font usato nel documento. =C8 un argomento molto complesso e = conoscere=20 i dettagli della questione non aggiunge nulla che possa = davvero=20 accrescere la vostra conoscenza dei CSS. In genere potrebbe = essere=20 usata per specificare l'url di un carattere particolare da = scaricare=20 su una macchina che non lo veda presente tra i suoi font. La = sintassi classica =E8 infatti questa:

@font-face {
font-family: = Santiago;
src:=20 url("http://www.mioserver.it/fonts/santiago.tt");
}

Il supporto non =E8 garantito e l'utilit=E0 effettiva = poco pi=F9 che=20 nulla.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =