[GUIDA CSS #12] @-rules: cosa sono e come si usano


[GUIDA CSS #12] @-rules: cosa sono e come si usano

Oggi vediamo insieme cosa sono le cosiddette @-rules. Esse non sono altro che tipi di costrutti alternativi per realizzare in maniera più flessibile alcune cose possibili solamente con l’ uso dei CSS. Una sola caratteristica accomuna le @-rules: tutte sono introdotte dalla chiocciola.

Questi particolari tipi di costrutti possono essere inseriti sia in un CSS esterno, sia nello stesso documento HTML (all’ interno di <style>). Vediamo insieme la prima @-rules che, in realtà, abbiamo già analizzato in passato: @import.

Abbiamo già visto qual’è la finalità di @import: inserire un foglio di stile nel documento. Tuttavia non sapete che ci sono diversi tipi di sintassi per utilizzare questa @-rules, vediamole insieme:

/* Sintassi Generica */
<style type=”text/css”>
@import url(pippo.css);
</style>

/* URL con virgolette */
<style type=”text/css”>
@import url(“pippo.css”);
</style>

/* Sintassi senza l’ uso di URL */
<style type=”text/css”>
@import “pippo.css”;
</style>

La sintassi generica è quella più utilizzata, le altre due invece sono meno utilizzate e soggette a problemi di compatibilità con i browser più obsoleti. Ricordate inoltre che è possibile utilizzare non solamente link relativi (come quelli utilizzati sopra), ma anche link assoluti. Una sola regola vige con questa @-rules, e dovete tenerla sempre presente: @import dovrà essere usato sempre come primo costrutto all’ interno di <style>. Di conseguenza costrutti come quello che segue saranno sbagliati:

<style type=”text/css”>
p.paragrafo {color: red; font-weight: bold;}
@import url (pippo.css);
</style>

E’ possibile, inoltre, utilizzare più @import all’ interno di <style> (la pagina web sarà formattata secondo un ordine ben preciso che vedremo successivamente) e, infine, è possibile specificare anche il supporto al quale applicare il CSS che importate. Esempio:

<style type=”text/css”>
@import url (pippo.css) screen;
@import url (paperino.css) print;
</style>

Un’ altra @-rules molto interessante, il cui utilizzo è quello di impostare un foglio di stile per un supporto ben preciso è @media. L’ utilizzo di @media è molto semplice, immaginate infatti di avere un foglio di stile ben preciso e magari, durante la fase di stampa, volete formattare solamente qualche elemento. Lo potete fare tranquillamente in questo modo:

<style type=”text/css”>
@media print {
p {color: red;}
}
</style>

Come potete vedere, dopo @media dovrete inserire il supporto al quale applicare il vostro CSS, dopodiché vi basterà aprire una parentesi graffa e inserire al suo interno le modifiche che vorrete apportare. Notate che alla fine bisognerà chiudere due volte la parentesi graffa, la prima volta per l’ ultimo selettore che andrete a modificare, mentre la seconda parentesi è quella di print (o di un qualunque altro supporto) che va aperta all’ inizio.

Altre due @-rules che vi menziono, ma non vale neanche la pena fare esempi, sono @charset e @font-face. La prima non fa altro che specificare l’ impostazione relativa alla codifica dei caratteri nella vostra pagina HTML e va inserita in un foglio di stile obbligatoriamente esterno. Quello che ottenete con @charset potete benissimo ottenerlo grazie al semplice HTML e all’ utilizzo dei meta-tag. Per quanto riguarda @font-face, possiamo subito dirvi che la compatibilità non è garantita, così come la sua utilità. Esso viene utilizzato per descrivere un particolare font utilizzato nel vostro sito web.

<- Lezione precedente (Elementi speciali: gli pseudo-elementi)
Lezione successiva (Unità di misura e relativi valori) ->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *