Ereditarietà

Podcast su CSS - 005: Ereditarietà

Supponiamo che tu abbia appena scritto del codice CSS per far sembrare gli elementi 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;
}

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

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

article a {
  color: maroon;
}

In questa lezione scoprirai perché ciò si verifica e in che modo l'ereditarietà è una funzionalità molto utile per scrivere meno CSS.

Flusso di ereditarietà

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

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

L'elemento principale (<html>) non erediterà nulla perché è il primo elemento del documento. Aggiungi codice CSS all'elemento HTML, in modo che il documento si propaghi a cascata.

html {
  color: lightslategray;
}

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

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

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

Quali proprietà vengono ereditate per impostazione predefinita?

Non tutte le proprietà CSS vengono ereditate per impostazione predefinita, ma ce ne sono molte. Come riferimento, di seguito è riportato l'elenco completo delle proprietà ereditate per impostazione predefinita, ricavato dal riferimento W3 di tutte le proprietà CSS:

Come funziona l'ereditarietà

Ogni elemento HTML ha tutte le proprietà CSS definite per impostazione predefinita con un valore iniziale. Un valore iniziale è una proprietà non ereditata e viene visualizzato come predefinito se la cascata non riesce a calcolare un valore per l'elemento.

Le proprietà ereditabili si estendono verso il basso e gli elementi figlio riceveranno un valore calcolato che rappresenta il valore dell'elemento padre. Ciò significa che se font-weight è impostato su bold per un elemento principale, tutti gli elementi secondari saranno in grassetto, a meno che per font-weight non sia impostato un valore diverso o il foglio di stile dello user agent non abbia un valore per font-weight per quell'elemento.

Come ereditare e controllare esplicitamente l'ereditarietà

L'ereditarietà può influire sugli elementi in modi inaspettati, quindi il CSS dispone di strumenti che possono farlo.

La parola chiave inherit

Puoi fare in modo che qualsiasi proprietà erediti il valore calcolato della proprietà 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> in modo che abbiano font-weight 900, anziché il valore bold predefinito, che sarebbe l'equivalente di font-weight: 700.

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

La classe .my-component imposta invece font-weight su 500. Per rendere gli elementi <strong> all'interno di .my-component, aggiungi anche font-weight: 500:

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

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

Puoi impostare esplicitamente questo valore, ma se in futuro utilizzerai inherit e il CSS di .my-component, puoi garantire che il tuo <strong> venga aggiornato automaticamente.

La parola chiave initial

L'ereditarietà può causare problemi agli elementi e initial offre un'opzione di ripristino efficace.

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

aside strong {
  font-weight: initial;
}

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

La parola chiave unset

La proprietà unset si comporta in modo diverso a seconda che venga ereditata o meno per impostazione predefinita. 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 non lo è, quindi puoi scrivere questo:

/* 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 ad 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 che è stata 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 modifichi la regola aside p impostandola su all: unset, non importa quali stili globali verranno applicati in futuro a p, l'impostazione della regola verrà sempre annullata.

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

Verifica la tua comprensione

Verifica la tua conoscenza dell'ereditarietà

Quali delle seguenti proprietà sono ereditabili?

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 comporti come initial?

reset
valore non valido, riprova.
unset
🎉
superset
valore non valido, riprova.

Risorse