Le @-rules

24 giugno 2013

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>

Tutte le lezioni

1 ... 30 31 32 33

Se vuoi aggiornamenti su Le @-rules inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Le @-rules

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy