CSS/Cascade

Per cascade si intendono le regole con le quali il browser assegna ad un elemento una dichiarazione di stile. Questo è importante nel caso di selettori diversi che indichino lo stesso elemento fornendo dichiarazioni contrastanti.

Nel caso di fogli di stile importati, vengono considerate gli stili del foglio che li importa.

L'origine di un foglio di stile

Prima di analizzare il cascade, è bene vedere le possibili origini di un foglio di stile:

• autore: è lo stile definito nel sorgente HTML della pagina dal webmaster o dal grafico del sito
• browser: i browser conformi agli standard del World Wide Web Consortium devono avere un foglio di stile predefinito da assegnare alle pagine
• utente: taluni browser mettono a disposizione all'utente la possibilità di creare un foglio di stile personalizzato, magari tramite un'interfaccia grafica e traducendo poi le impostazioni dell'utente in dichiarazioni CSS

È possibile quindi che questi fogli di stile si sovrappongano e in questo caso vengono applicati in base al cascade.

La specificità di un selettore

Altro elemento importante è la specificità di un selettore. Vediamo come calcolarla:

• calcolare il numero di attributi ID nel selettore (= a)
• calcolare il numero degli altri attributi (es. classi) e pseudoclassi del selettore (= b)
• calcolare il numero dei nomi degli elementi HTML (= c)

Concatenare ora i tre numeri nell'ordine a + b + c. Si faccia attenzione a scegliere una base di numerazione opportuna: se, ad esempio, b vale 12, si può scegliere una base esadecimale in modo tale che il numero risulti, ad esempio, 0-c-7 invece che 0-12-7.

Si noti che l'attributo style degli elementi HTML possono essere considerati selettori ID, in quanti hanno un riferimento univoco con il tag a cui si riferiscono.

!important

Ultima regola da vedere prima di analizzare le regole del cascade è la dichiarazione !important la quale indica al browser che una regola è particolarmente importante, dando ad essa priorità rispetto ad eventuali proprietà contrastanti in altre dichiarazioni. Vediamo la sintassi:

 selettore { [dichiarazioni...]
 proprietà: valore !important;
 [dichiarazioni...]
 }

Attribuire uno stile ad un elemento

Il CSS assegna un peso a ciascun blocco di dichiarazioni di stile; nel caso di sovrapposizione di dichiarazioni, vince quella con maggior peso.

Analizziamo finalmente le regole seguite dal browser per attribuire uno stile ad un elemento HTML nella pagina:

• dapprima cerca tutte le dichiarazioni identificate dal selettore che corrisponde all'elemento in questione
• la prima analisi riguarda l'origine degli stili. Per quanto riguarda le normali dichiarazioni, hanno la precedenza, in ordine, gli stili dell'autore, dell'utente e del browser. Nel caso di dichiarazioni seguite da !important, invece, hanno la precedenza, in ordine, gli stili dell'utente, dell'autore e del browser; questo per permettere la piena accessibilità dei contenuti da parte di utenti con handicap visivi, ad esempio. Le dichiarazioni !important superano sempre le dichiarazioni normali.
• la seconda distinzione riguarda la specificità del selettore: ha la precedenza il selettore con specificità maggiore
• nel caso due dichiarazioni abbiano stessi peso, specificità e origine vince quella fornita per ultima. Le dichiarazioni dei fogli di stile importati sono considerate come precedenti quasiasi dichiarazione del foglio che importa.