Ereditarietà

The CSS Podcast - 005: Inheritance

Supponiamo che tu abbia appena scritto del codice CSS per fare in modo che gli elementi abbiano l'aspetto di un pulsante.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

Aggiungi quindi un elemento link a un articolo di contenuti con un valore class di .my-button. Tuttavia, c'è un problema: il testo non è del colore che ti aspettavi. Come è accaduto?

Alcune proprietà CSS vengono ereditate se non specifichi un valore. Nel caso di questo pulsante, ha ereditato il color da questo CSS:

article a {
  color: maroon;
}

In questa lezione scoprirai perché accade e come l'eredità sia una funzionalità efficace per aiutarti a scrivere meno CSS.

Flusso di ereditarietà

Vediamo come funziona l'eredità utilizzando questo snippet di HTML:

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

L'elemento radice (<html>) non eredita nulla perché è il primo elemento del documento. Aggiungi del CSS all'elemento HTML e inizia a applicarlo in cascata al documento.

html {
  color: lightslategray;
}

La proprietà color viene ereditata per impostazione predefinita da altri elementi. L'elemento html ha color: lightslategray, pertanto tutti gli elementi che possono ereditare il colore avranno ora un colore lightslategray.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

Solo <p> avrà il testo in corsivo perché è l'elemento nidificato più profondo. L'eredità avviene solo verso il basso, non verso gli elementi principali.

Quali proprietà vengono ereditate per impostazione predefinita?

Non tutte le proprietà CSS vengono ereditate per impostazione predefinita, ma molte lo sono. Come riferimento, di seguito è riportato l'elenco completo delle proprietà ereditate per impostazione predefinita, tratto dalla documentazione di riferimento W3 di tutte le proprietà CSS:

Come funziona l'eredità

Ogni elemento HTML ha ogni proprietà CSS definita per impostazione predefinita con un valore iniziale. Un valore iniziale è una proprietà che non viene ereditata e viene visualizzata come predefinita se la regola di applicazione in cascata non riesce a calcolare un valore per quell'elemento.

Le proprietà che possono essere ereditate vengono applicate in modo gerarchico verso il basso e gli elementi secondari riceveranno un valore calcolato che rappresenta il valore della proprietà principale. Ciò significa che se un elemento principale ha font-weight impostato su bold, tutti gli elementi secondari saranno in grassetto, a meno che font-weight non sia impostato su un valore diverso, o lo stile dell'agente utente abbia un valore per font-weight per quell'elemento.

Come ereditare e controllare esplicitamente l'eredità

L'eredità può influire sugli elementi in modi inaspettati, quindi il CSS dispone di strumenti utili per questo scopo.

La parola chiave inherit

Puoi fare in modo che qualsiasi proprietà erediti il valore calcolato del relativo elemento principale con la parola chiave inherit. Un modo utile per utilizzare questa parola chiave è creare eccezioni.

strong {
  font-weight: 900;
}

Questo snippet CSS imposta tutti gli elementi <strong> su un font-weight di 900, instead of the default bold value, which would be the equivalent of font-weight: 700.

.my-component {
  font-weight: 500;
}

La classe .my-component imposta font-weight su 500. Per fare in modo che gli elementi <strong> all'interno di .my-component siano anche font-weight: 500, aggiungi:

.my-component strong {
  font-weight: inherit;
}

Ora gli elementi <strong> all'interno di .my-component avranno un font-weight di 500.

Potresti impostare questo valore in modo esplicito, ma se utilizzi inherit e il CSS di .my-component cambia in futuro, puoi garantire che <strong> rimanga automaticamente aggiornato.

La parola chiave initial

L'eredità può causare problemi con gli elementi e initial offre una potente opzione di reimpostazione.

In precedenza hai appreso che ogni proprietà ha un valore predefinito in CSS. La parola chiave initial reimposta una proprietà sul valore predefinito iniziale.

aside strong {
  font-weight: initial;
}

Questo snippet rimuoverà il carattere grassetto da tutti gli elementi <strong> all'interno di un elemento <aside> e li renderà in carattere normale, che è il valore iniziale.

La parola chiave unset

La proprietà unset si comporta in modo diverso se una proprietà viene ereditata per impostazione predefinita o meno. Se una proprietà viene ereditata per impostazione predefinita, la parola chiave unset sarà uguale a inherit. Se la proprietà non viene ereditata per impostazione predefinita, la parola chiave unset è uguale a initial.

Ricordare quali proprietà CSS vengono ereditate per impostazione predefinita può essere difficile, unset può essere utile in questo contesto. Ad esempio, color viene ereditato per impostazione predefinita, mentre margin no, quindi puoi scrivere quanto segue:

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

Ora margin viene rimosso e color torna a essere il valore calcolato ereditato.

Puoi utilizzare il valore unset anche con la proprietà all. Tornando all'esempio precedente, cosa succede se gli stili p globali ricevono alcune proprietà aggiuntive? Verrà applicata solo la regola impostata per margin e color.

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

Se cambi la regola aside p in all: unset, non importa quali stili globali verranno applicati a p in futuro, poiché non verranno mai impostati.

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

Verificare di aver compreso

Metti alla prova le tue conoscenze sull'eredità

Quali delle seguenti proprietà vengono ereditate per impostazione predefinita?

animation
Le animazioni non vengono trasmesse ai bambini.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Quale valore si comporta come inherit, a meno che non ci sia nulla da ereditare, e poi si comporta come initial?

reset
non è un valore valido. Riprova.
unset
🎉
superset
non è un valore valido. Riprova.

Risorse