Semplicemente

Cosa succede quando due o più regole entrano in conflitto in un foglio di stile?

La specificità dei selettori

In generale i selettori maggiormente specifici vincono. Ma come si calcola la specificità?
Lo si fa utilizzando una sequenza di quattro numeri (A, B, C, D), ottenuti nel seguente modo:

1. A: se il selettore è un attributo style di HTML conta 1, altrimenti 0.
2. B: conta il numero di attributi ID presenti nel selettore.
3. C: conta il numero di altri attributi o pseudo-classi presenti nel selettore.
4. D: conta il numero di nomi di elementi o pseudo-elementi presenti nel selettore.

La concatenazione di questi quattro numeri fornisce la specificità del selettore.

Per esempio una regola come la seguente p.nota { color: #ccc; } quanto è specifica? Dunque, non è contenuta nel valore dell’attributo style di HTML, quindi A = 0. Non ci sono ID (#) nel selettore allora B = 0. C’è una classe (.nota) quindi C = 1. E’ presente il nome di un elemento (p) perciò D = 1. La specificità del nostro selettore è quindi: 0, 0, 1, 1.

Consideriamo ora questa regola: #contenuto p.nota { color: #000; }. Non è contenuta nel valore dell’attributo style di HTML: A = 0. C’è un ID (#contenuto) nel selettore: B = 1. C’è una classe (.nota) perciò C = 1. E’ presente il nome di un elemento (p): D = 1. La specificità è: 0, 1, 1, 1. Questo selettore è maggiormente specifico rispetto al precedente e vincerà di conseguenza il conflitto.

L’importanza delle dichiarazioni

Le dichiarazioni del foglio di stile alle quali è associato il costrutto !important, hanno la precedenza sulle altre. Nel caso di conflitto con dichiarazioni normali vincono sempre le regole importanti. Ecco un esempio:

1. p { font-size: 24px !important; }

Attenzione ad inserire sempre il costrutto prima della chiusura della dichiarazione (;)!

IE 6 e precedenti applicano !important in modo scorretto. Il costrutto sarà ignorato se un’altra dichiarazione della stessa proprietà compare successivamente nello stesso blocco di dichiarazione. Con IE 7 il problema è stato risolto.

L’ereditarietà

I discendenti di un elemento ereditano i valori delle proprietà associate all’antenato, a meno che non sia loro applicata una regola maggiormente specifica.

Alcune proprietà non sono per definizione ereditate, per esempio border, margin, padding, background ecc.

I valori ereditati hanno specificità nulla.

La cascata

In generale le regole di un foglio di stile sono applicate a cascata: a parità di specificità vince la regola che compare per ultima. E’ necessario, però, considerare anche l’origine del foglio di stile, che può essere:

• L’autore (il CSS designer)
• L’utente (il navigatore)
• Lo User Agent (il browser)

Il foglio di stile del browser è quello predefinito. Questo CSS è applicato dal browser quando non sono specificati fogli di stile dall’autore o dall’utente.

Nella cascata ad ogni regola è assegnato un peso e le regole con peso maggiore hanno la precedenza.

• Le dichiarazioni presenti nel foglio di stile dell’autore hanno un peso maggiore di quelle dell’utente, a meno che queste ultime non siano importanti.
• Le dichiarazioni presenti nel foglio di stile predefinito dal browser hanno il peso minore.

Il browser

Che cosa fa il browser quando un foglio di stile è caricato?

Innanzitutto individua tutte le dichiarazioni che si applicano all’elemento e alla proprietà in questione. Poi ordina le dichiarazioni individuate in base all’importanza e all’origine del foglio di stile. Secondo il seguente schema (in ordine crescente di peso):

1. Foglio di stile predefinito del browser.
2. Foglio di stile normale dell’utente.
3. Foglio di stile normale dell’autore.
4. Foglio di stile importante dell’autore.
5. Foglio di stile importante dell’utente.

Come si nota le regole importanti del foglio di stile dell’utente vincono. Questo è logico se si considera il fatto che all’utente deve essere sempre garantita la possibilità di modificare lo stile delle pagine web, per esempio per ragioni di accessibilità.

Infine, il browser ordina le regole in funzione della specificità del selettore.

Contribuisci alla serie di articoli Introduzione ai CSS

Tag: CSS, introduzione ai CSS, selettore, selettori

Questo articolo è stato inviato Monday 17 December 2007 alle 19:08 ed è archiviato nella categoria Fogli di stile, Linguaggi di marcatura. Puoi seguire le risposte tramite il feed RSS 2.0. Se lo desideri puoi lasciare un commento, o un trackback dal tuo sito.