Le Direttive @rules

Le cosiddette regole con il simbolo @ sono particolari costrutti che condividono una caratteristica comune: l’utilizzo del simbolo della chiocciola. La pronuncia è analoga a quella utilizzata per gli indirizzi e-mail, come ad esempio at-import, at-media, e così via.

Dal punto di vista della funzione, queste regole rappresentano alternative, spesso più flessibili e potenti, per realizzare ciò che può essere ottenuto in modi diversi. Nella lezione 5 abbiamo già esaminato come il costrutto @import sia un’alternativa all’uso dell’elemento <link> per collegare fogli di stile esterni.

A livello sintattico, le regole con il simbolo @ possono essere definite all’interno del corpo del documento HTML, specificamente all’interno dell’elemento <style>:

oppure direttamente nel codice di un foglio di stile CSS esterno.

Ciascuna delle diverse regole con il simbolo @ ha scopi e criteri di costruzione distinti. Esaminiamoli.

@import @import è utilizzato principalmente per collegare un foglio di stile esterno al documento. La sintassi generica è la seguente:

Come si può notare, la direttiva è accompagnata dall’indicazione “url” seguita dall’indirizzo del CSS racchiuso tra parentesi tonde. La regola con il simbolo @ deve terminare con un punto e virgola di chiusura.

Altre possibili sintassi includono:

1. URL tra virgolette:

2. Direttiva senza l’indicazione “url”:

L’URL del foglio di stile può essere relativo, come nei precedenti esempi, o assoluto, come illustrato di seguito:

Un principio fondamentale è che all’interno del tag <style>, la regola @import deve essere la prima regola definita.

È possibile importare più fogli di stile all’interno di un singolo tag <style>:

Un uso interessante di @import è la sua capacità di essere utilizzata anche all’interno di un foglio di stile per incorporare un altro CSS esterno.

È possibile definire all’interno della direttiva @import anche il supporto cui applicare il CSS, in modo simile a quanto visto riguardo all’attributo “media”. Per farlo, è sufficiente aggiungere all’URL del CSS l’indicazione di uno dei media previsti nella specifica: