Ereditarietà

Podcast CSS - 005: Ereditarietà

Supponiamo che tu abbia appena scritto alcuni CSS per rendere gli elementi simili a 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 pari a .my-button. Tuttavia c'è un problema, il testo non è del colore previsto. Come è accaduto?

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

article a {
  color: maroon;
}

In questa lezione scoprirai perché succede Scopri perché 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 CSS all'elemento HTML. e inizia a avanzare lungo il 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 un colore ora avranno il colore lightslategray.

body {
  font-size: 1.2em;
}
di Gemini Advanced. 
p {
  font-style: italic;
}

Solo l'elemento <p> avrà il testo in corsivo perché è l'elemento nidificato più profondo. L'ereditarietà scorre solo verso il basso, non agli 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, ecco l'intero elenco di proprietà ereditate per impostazione predefinita: tratto 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à che non viene eredita e viene visualizzata come predefinita se la cascata non riesce a calcolare un valore per quell'elemento.

Le proprietà che possono essere ereditate vengono applicate a cascata e agli elementi secondari verrà calcolato un valore che rappresenta il valore dell'elemento padre. Ciò significa che se l'elemento font-weight è impostato su bold per un publisher principale, tutti gli elementi secondari saranno in grassetto, a meno che font-weight non sia impostato su un valore diverso, oppure il foglio di stile dello user agent ha un valore font-weight per quell'elemento.

Come ereditare e controllare esplicitamente l'ereditarietà

L'ereditarietà può influire sugli elementi in modi imprevisti, per cui CSS dispone di strumenti utili in tal senso.

La parola chiave inherit

Puoi fare in modo che qualsiasi proprietà erediti il valore calcolato della relativa 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 un valore font-weight pari a 900, invece del valore predefinito di bold, che sarebbe l'equivalente di font-weight: 700.

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

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

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

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

Puoi impostare questo valore in modo esplicito ma se in futuro utilizzi inherit e il CSS di .my-component, puoi garantire che il tuo <strong> sarà sempre aggiornato.

La parola chiave initial

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

In precedenza hai imparato 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à lo spessore in grassetto da tutti gli elementi <strong> all'interno di un elemento <aside> e, e rendile il loro peso 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.

Memorizzare 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, ma 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 il valore margin viene rimosso e color torna a essere il valore ereditato calcolato.

Puoi utilizzare il valore unset anche con la proprietà all. Tornando all'esempio precedente, Cosa succede se gli stili p globali hanno altre proprietà? 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 modifichi invece la regola aside p impostandola su all: unset, non importa quali stili globali verranno applicati a p in futuro, rimarranno sempre non impostate.

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

Verifica le tue conoscenze

Verificare le conoscenze in materia di 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 si comporta come initial?

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

Risorse