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 5 come il costrutto @import sia un'alternativa all'elemento <link> per collegare fogli di stile esterni.
A livello sintattico le @-rules possono essere definite o nel corpo del documento HTML, 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(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 prevedono:
1. URL con virgolette:
@import url("stile.css");2. Direttiva senza l'indicazione url:
@import "stile.css";L'url del foglio di stile può essere relativo, come negli esempi precedenti, o assoluto, come in questo:
<style type="text/css">
@import url(http://www.miosito.it/stile.css);
</style>Un principio fondamentale è che all'interno del tag <style>, @import deve essere la prima regola definita.
È possibile importare all'interno di un singolo tag <style> più fogli di stile:
<style type="text/css">
@import url(stile-1.css);
@import url(stile-2.css);
</style>Un uso interessante di @import è che può essere usata 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 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(stampa.css) print;
@import url(schermo.css) screen;
</style>