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;
}
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:
- azimut
- Bordo-compressione
- border-spacing
- lato dei sottotitoli codificati
- colore
- cursore
- direzione
- celle-vuote
- font-family
- font-size
- stile carattere
- variante carattere
- peso-fonte
- carattere
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- orfani
- frasi
- allineamento testo
- rientro testo
- text-transform
- visibilità
- spazio vuoto
- 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à 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?
color
text-align
line-height
animation
font-size
Quale valore si comporta come inherit
, a meno che non ci sia nulla da ereditare
si comporta come initial
?
superset
reset
unset