Ereditarietà

Un concetto da tenere bene in mente quando si ha a che fare con i CSS è quello dell’ereditarietà.
Alcuni valori sono ereditati da un genitore ai propri elementi figlio o meglio ai propri discendenti. Attenzione non tutte le proprietà sono ereditate, anzi per dire la verità sono più quelle che non lo sono rispetto a quelle che lo sono, difatti secondo le specifiche, ogni proprietà definisce se è ereditata o meno.
Supponiamo che abbiamo impostato la proprietà color nell’elemento body su grey. Bene tutti gli elementi discendenti da body, a meno che non sia specificato diversamente con un’altra regola, avranno il colore del testo grigio. Questo comportamento è piuttosto logico, pensate se non fosse così e color non fosse ereditata. Dovremmo specificare per ogni elemento del DOM il testo di colore grigio. Impensabile!!!
Supponiamo ora che abbiamo anche applicato un’immagine di sfondo all’elemento body. Se la proprietà background-image fosse ereditata tutti gli elementi del documento avrebbero come sfondo l’immagine di sfondo del documento. Un disastro! Stesso discorso sui bordi, margini, padding etc.. se li applichiamo ad un elemento certamente non vogliamo il loro valore sia ereditato da i suoi discendenti.
Se non siamo sicuri se uno proprietà è ereditata o meno, oltre alla descrizione della proprietà nelle specifiche, possiamo vederlo attraverso questa utile tabella: Full property table.

Il valore ‘inherit’

Ci possono essere situazioni in cui vogliamo che siano ereditate anche proprietà che di default non lo sono, oppure si vuole aumentare il perso della proprietà ereditata.
Specificando il valore ‘inherit‘ per una qualsiasi proprietà CSS applicata ad un elemento, avremo come risultato che l’elemento otterrà lo stesso valore del suo genitore per la proprietà in questione. Il valore ‘inherit‘ può essere utilizzato, quindi, per forzare l’eredità di valori, e può essere utilizzato anche su proprietà che normalmente non sono ereditarie.
Se il valore ‘inherit‘ è impostato sull’elemento radice, la proprietà viene assegnata il suo valore iniziale.
Facciamo un esempio, normalmente come detto, la proprietà color è ereditata. Tuttavia, nel caso di elementi di ancoraggio (a), la proprietà color è comunemente fissata sul colore blu dagli user agent style sheet (stili di default applicati dai browsers). In questo caso possiamo utilizzare il valore ‘inherit‘ nel nostro foglio di stile, sovrascrivendo le impostazioni di stile user agent.
Nell’esempio che segue, abbiamo impostato il colore di primo piano dell’elemento div con id side sul marrone, ed abbiamo specificato che tutti gli elementi ancora discendenti devono ereditare il valore del colore di primo piano dal loro elemento genitore:

div#side {
	color: brown;
}
div#side a {
    color: inherit;
}

Nell’immagine possiamo notare chiaramente quello che è successo sull’elemento ancora (si legge dal basso all’alto, la prima regola è quella più specifica). Prima è stata applicato alla proprietà color, in base all’ereditarietà, il valore del suo elemento genitore, quindi questo è stato sovrascritto dello stile predefinito del browser, che nel nostro caso è Chrome quindi usa il motore webkit (UA styles), infine questo valore è stato sovrascritto dal valore ‘inherit‘ specificato direttamente sul foglio di stile utente.

Consideriamo le seguenti regole CSS:

div {
    background-color: yellow;
}
span {
    background-color: aqua;
}
div span {
    background-color: inherit;
}

ed il seguente blocco di markup:

    
        Se inherit funziona lo sfondo del testo dovrebbe essere giallo (perchè ha 
        background-color:inherit ed il suo genitore ha background-color:yellow). 
        In IE7- il background è color aqua, visto che  inherit è ignorata, così 
        la precedente regola background-color:aqua rimane valida.
    

Possiamo vedere il risultato del test qua.

‘inherit’ e shorthand

Se utilizziamo le proprietà scorciatoia (shorthand) come, per esempio, background non dobbiamo mixare ‘inherit‘ con gli altri valori: Per esempio la seguente regola è errata:

div {
    background: #e2e2e2 inherit top right repeat-x fixed;
}

Difatti ‘inherit‘ deve essere l’unico valore nella dichiarazione. Nell’esempio precedente la regola risulterà ambigua. Quindi dobbiamo ricordarci che quando vogliamo utilizzare il valore ‘inherit‘ dobbiamo usare dichiarazioni complete e non scorciatoie. Nel nostro esempio avremo dovuto quindi usare la proprietà background-image.

div {
    background-image: inherit;
}

Risorse

w3.org/TR/CSS2/cascade.html#inheritance
w3.org/TR/CSS2/propidx.htm