Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

Ereditarietà nei CSS

15 giugno 2011, Scritto da , category css

ereditarietà in famiglia (simpson)Peculiarità dei CSS è l’ereditarietà, ovvero la capacità di “tramandare” alcune regole da elemento genitore a figlio.

La comprensione della struttura di una pagina HTML è, pertanto, importantissima per capire come sfruttare al meglio questa caratteristica al fine di ottimizzare il css diminuendo il codice scritto dal momento che una regola, se ereditabile, può essere scritta solamente per il genitore.

Definire una regola di stile per un elemento parent (padre), infatti, significa renderla valida anche per tutti gli elementi discendenti, i figli (child).

Dichiarare, per esempio, un colore rosso al font di un elemento di tipo <div> fa si che questo colore si applichi agli eventuali elementi di tipo link <a>, titolo <h1>, paragrafo <p> etc contenuti in esso. In pratica gli elementi child, i figli, ereditano “il DNA” del padre. Ovviamente la cosa si può verificare soltanto se gli elementi discendenti hanno, tra le loro caratteristiche, attributi presenti anche nell’elemento padre. Un’immagine, per esempio, non verrà certo colorata di rosso soltanto perché il <div> che la contiene ha impostato quella proprietà a rosso! 🙂

Nel caso in cui si volesse differenziare gli stili degli elementi figli bisognerà applicare delle regole ad hoc tramite selettori discendenti, selettori id, classi o, in alternativa, dichiarandole in line tramite l’attributo style dell’elemento HTML interessato.

Es:

<div style="color:red;border:1px solid red" id="rosso">
<p>questo testo verrà colorato di rosso
perché eredita il colore dal <div> genitore</p>
<p>anche questo paragrafo verrà scritto in rosso perché
anch'esso è "figlio del" <div> rosso!</p>
</div>

diventa:

questo testo verrà colorato di rosso
perché eredita il colore dal <div> genitore

anche questo paragrafo verrà scritto in rosso perché
anch’esso è “figlio del” <div> rosso!

Come si può constatare è stato sufficiente dichiarare il colore nel div genitore per poter applicare, grazie all’ereditarietà, la stessa proprietà anche agli elementi figli.

Se a questo punto, invece, avessi voluto forzare l’aspetto del secondo paragrafo, come avrei potuto fare?
Semplice! Sarebbe stato sufficiente applicare una classe o un id (o una dichiarazione inline) al secondo paragrafo.
Vediamo come.
Es:

<div style="color:red;border:1px solid red" id="rosso">
<p>questo testo verrà colorato di rosso
perché eredita il colore dal <div> genitore</p>
<p style="color:blue">questo paragrafo, invece, viene scritto 
in blu perché viene dichiarata una nuova regola nell'attributo 
style del tag <p>
</div>

diventa:

questo testo verrà colorato di rosso
perché eredita il colore dal <div> genitore

questo paragrafo, invece, viene scritto
in blu perché viene dichiarata una nuova regola nell’attributo
style del tag <p>!

Da questo esempio possiamo dedurre che più vicina è, al suo elemento, la dichiarazione di una regola e più questa avrà importanza nel definirne l’aspetto, al di là dell’ereditarietà.

Regole ed applicazione del concetto di ereditarietà

Si può sfruttare l’ereditarietà, come visto, per sfruttare regole già dichiarate in elementi contenitori.

E’ bene precisare che solo le impostazioni stilistiche ricadono sugli elementi discendenti, e non tutte le regole solo ereditabili. Sono ereditabili soltanto le regole che riguardano la formattazione del testo.

Priorità delle regole

C’è un ordine preciso che determina quale regole verranno applicate agli elementi.
Un elemento html a cui viene applicata una classe, per esempio, risulterà stilato sulla base delle regole della classe e non delle regole definite al selettore stesso.
Questo codice:

<style type="text/css">
p {color:black;}
.red{color:red;}
</style>
<p class="red">testo</p>

risulterà rosso

testo

Se oltre alla classe avessi inserito anche un id, precedentemente stilato, le regole dichiarate per quest’ultimo avrebbero prevalso sulla classe e sullo stile del selettore.
Es:

<style type="text/css">
p {color:black;}
.red{color:red;}
#green {color:green}
</style>
<p class="red" id="green">testo</p>

risulterà verde

testo

Se, infine, avessi dichiarato delle proprietà all’interno del tag con l’attributo style, queste avrebbero finito per prevalere su tutte le altre dichiarazioni e l’esempio di prima sarebbe risultato così:

<style type="text/css">
p {color:black;}
.red{color:red;}
#green {color:green}
</style>
<p class="red" id="green" style="color:purple">testo</p>

risulterà viola (purple)

testo

Alla fine, dunque, per capire quali proprietà verranno applicate, bisognerà tener conto della specificità dei selettori, e, per finire, della prossimità delle proprietà stesse rispetto all’elemento interessato.
In un contesto come quello del secondo esempio sopra riportato, la specificità più elevata è quella dell’id, poi della classe ed infine del selettore.
Schematizzando, si può stabilire l’ordine dei selettori a più alto “peso specifico”:

  1. id
  2. classe
  3. selettore

Dobbiamo, tuttavia, ricordare che, come riscontrato nel terzo esempio, sarà la regola dichiarata più vicina all’elemento stesso a prevalere su tutti.
Tornando alle priorità, è bene ricordare che gli stili di una pagina HTML vengono applicati secondo un ordine preciso, ovvero:

  1. css dell’autore della pagina html (in pratica, lo sviluppatore)
  2. css dell’utente (ciascun navigatore può personalizzare i fogli di stile del proprio browser in modo da forzare font, background, colori etc di ogni sito visitato)
  3. css del browser (ogni browser ha un suo css di riferimento da applicare nel caso in cui il sito non abbia alcuna specifica stilistica)