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:
- azimut
- border-collapse
- border-spacing
- Lato dei sottotitoli
- colore
- cursore
- direction
- celle-vuote
- famiglia di caratteri
- font-size
- font-style
- font-variant
- font-weight
- carattere
- Spaziatura tra lettere
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- orfani
- citazioni
- text-align
- text-indent
- trasformazione-testo
- visibilità
- white-space
- vedove
- word-spacing
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
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
unset
superset