Ridurre le ripetizioni di valori css con la proprietà inherit

Evitiamo ridondanze Spesso ti sarai ritrovato a ripetere un valore di una proprietà in diverse regole css. A volte è […]
Ridurre le ripetizioni di valori css con la proprietà inherit

Evitiamo ridondanze

Spesso ti sarai ritrovato a ripetere un valore di una proprietà in diverse regole css. A volte è necessario, ma in alcune situazioni si potrebbe anche evitare.

Un primo esempio

Immagina ad esempio di voler cambiare il colore della navigazione principale con lo stesso colore del corpo del testo, faccio subito un esempio pratico, inizialmente ho queste dichiarazioni css:

body{
    color:black;
    font-family:Georgia, Times, serif;
}

a:link {
    color:grey;
}

h1, h2, h3, h4, h5, h6 {
    color:violet;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
}

Un secondo esempio

Bene, ammettiamo ora di voler associare lo stesso colore del corpo del testo al menù, mentre agli H2 della sidebar lo stesso font-family e colore del corpo. Potrei sicuramente scrivere le dichiarazioni in questo modo:

.menu a{
    color:black;
}

.sidebar h2{
    color:black;
    font-family:Georgia, Times, serif;
}

Cambio improvviso!

Tutto funziona bene. Ma cosa accade se all’improvviso, il cliente si sveglia e ti chiede di cambiare il colore ed il font-family del corpo del sito? il colore del menu e del titolo della barra laterale, compreso il font-size, rimarranno gli stessi e sarai costretto a modificare i valori anche in quelle regole. Ecco che entra in gioco la proprietà inherit, associando questo valore ad una proprietà essa acquisirà il valore specificato nella proprietà del genitore dell’elemento, nel mio caso il body. Esempio:

.menu a{
    color:inherit;
}

.sidebar h2{
    color:inherit;
    font-family:inherit;
}

Vantaggi e svantaggi

Il vantaggio si ha sicuramente nello snellimento sia della gestione che manutenzione del progetto. Questa proprietà può essere utilizzata non solo per colori e font, ma anche per padding, margini, background.

Non utilizzarla nel caso in cui tale proprietà venga già ereditata dal suo elemento padre, perchè sarebbe inutile specificare un valore che già viene ereditato. Esempio:

body{
    color:black;
    font-family:Georgia, Times, serif;
}

h2{
    color:inherit; /* Codice ridondante */
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
}

IE Pecca!

Attenzione che la proprietà inherit non è compatibile con ie7 e versioni precedenti,  per fixare la cosa è possibile utilizzare una soluzione javascript come ie9.js.

Ricorda che abbiamo la Fanpage

Spero che il post sia stato di tuo gradimento. Per qualsiasi dubbio o segnalazione scrivi pure nei commenti o sulla nostra fanpage. Alla prossima 😉

  • Molto utile, grazie.

    • Ciao Simone, mi fa piacere che il post sia stato di tuo gradimento. Continua a seguirci 😉

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github