Podcast CSS - 004: Cascade
.
CSS è l'acronimo di Cascading Stylesheets. Il cascade è l'algoritmo utilizzato per risolvere i conflitti in cui più regole CSS si applicano a un elemento HTML. Questo è il motivo per cui il testo del pulsante con il seguente CSS sarà blu.
button {
color: red;
}
button {
color: blue;
}
Comprendere l'algoritmo cascade è utile per comprendere in che modo il browser risolve conflitti di questo tipo. L'algoritmo cascade è suddiviso in quattro fasi distinte.
- Posizione e ordine di apparizione: l'ordine con cui vengono visualizzate le regole CSS
- Specificità: un algoritmo che determina quale selettore CSS ha la corrispondenza più efficace.
- Origine: l'ordine in cui appare il codice CSS e da dove proviene, se si tratta di uno stile del browser. CSS di un'estensione del browser o CSS creati da te
- Importanza: alcune regole CSS hanno un peso maggiore di altre.
in particolare con il tipo di regola
!important
Posizione e ordine di apparizione
L'ordine in cui le regole CSS vengono visualizzate e come vengono visualizzate viene preso in considerazione dalla cascata mentre calcola la risoluzione dei conflitti.
La demo all'inizio di questa lezione è l'esempio più semplice di posizionamento. Esistono due regole che hanno selettori di specificità identica, quindi l'ultima sfida dichiarata vinta.
Gli stili possono provenire da varie origini su una pagina HTML,
ad esempio un tag <link>
,
un tag <style>
incorporato,
e CSS incorporati, come definito nell'attributo style
di un elemento.
Se disponi di un <link>
che include CSS nella parte superiore della pagina HTML,
poi un altro <link>
che includa CSS in fondo alla pagina: il <link>
inferiore avrà il livello più specifico.
Lo stesso accade anche con gli elementi <style>
incorporati.
Diventano più specifici man mano che si trovano più in basso nella pagina.
Questo ordinamento si applica anche agli elementi <style>
incorporati.
Se vengono dichiarate prima di un <link>
,
il CSS del foglio di stile collegato avrà maggiore specificità.
Un attributo style
incorporato in cui è stato dichiarato un CSS sostituirà tutti gli altri CSS,
indipendentemente dalla sua posizione, a meno che per una dichiarazione non sia stato definito il criterio !important
.
La posizione viene applicata anche nell'ordine della regola CSS.
In questo esempio, l'elemento avrà uno sfondo viola perché background: purple
è stato dichiarato per ultimo.
Poiché lo sfondo verde era stato dichiarato prima di quello viola, ora viene ignorato dal browser.
.my-element {
background: green;
background: purple;
}
Possibilità di specificare due valori per la stessa proprietà
può essere un modo semplice per creare fallback per i browser che non supportano un particolare valore.
Nel prossimo esempio, font-size
viene dichiarato due volte.
Se il browser clamp()
è supportato,
la dichiarazione font-size
precedente verrà ignorata.
Se clamp()
non è supportato dal browser,
la dichiarazione iniziale sarà rispettata e la dimensione del carattere sarà di 1, 5 rem
.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
Verifica le tue conoscenze
Metti alla prova le tue conoscenze sulla cascata
Se la pagina contiene il seguente codice HTML:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="/styles.css" /> </head> <body> <button>I am a button</button> <style> button { background: pink; } </style> </body> </html>
All'interno di styles.css
, è presente la seguente regola CSS:
button { background: yellow; }
Di che colore è lo sfondo del pulsante?
Specificità
La specificità è un algoritmo che determina quale selettore CSS è il più specifico, utilizzando un sistema di ponderazione o punteggio per eseguire questi calcoli. Se rendi una regola più specifica, puoi far sì che venga applicato anche se qualche altro CSS corrispondente al selettore viene mostrato in un secondo momento nel CSS.
Nella prossima lezione scoprirai i dettagli su come viene calcolata la specificità, Tuttavia, tenere a mente alcuni aspetti ti aiuterà a evitare troppi problemi di specificità.
Il CSS che sceglie come target una classe su un elemento renderà la regola più specifica,
e quindi considerati più importanti da applicare,
rispetto al CSS che ha come target solo l'elemento.
Ciò significa che con il seguente CSS,
h1
sarà di colore rosso anche se entrambe le regole corrispondono e la regola per il selettore h1
viene visualizzata in seguito nel foglio di stile.
<h1 class="my-element">Heading</h1>
.my-element {
color: red;
}
h1 {
color: blue;
}
Un id
rende il CSS ancora più specifico,
pertanto gli stili applicati a un ID sostituiranno quelli applicati in molti altri modi.
Questo è uno dei motivi per cui in genere non è una buona idea collegare gli stili a un id
.
Potrebbe essere difficile sovrascrivere quello stile con qualcos'altro.
La specificità è cumulativa
Come scoprirai nella prossima lezione,
a ogni tipo di selettore vengono assegnati punti che indicano quanto è specifico,
vengono sommati i punti di tutti i selettori utilizzati per il targeting di un elemento.
Ciò significa che se scegli come target un elemento con un elenco di selettore come
a.my-class.another-class[href]:hover
ottieni qualcosa di piuttosto difficile da sovrascrivere con altri CSS.
Per questo motivo, e per contribuire
a rendere il tuo CSS più riutilizzabile,
è buona norma mantenere i selettori il più semplici possibile.
Usa la specificità come strumento per individuare gli elementi quando ne hai bisogno,
ma valuta sempre la possibilità di eseguire il refactoring, se possibile, di elenchi di selettore lunghi e specifici.
Origine
Il CSS che scrivi non è l'unico CSS applicato a una pagina. La cascata tiene conto dell'origine del CSS. Questa origine include il foglio di stile interno del browser, stili aggiunti dalle estensioni del browser o dal sistema operativo e dal CSS che hai creato. L'ordine di specificità di queste origini, dalla meno specifica alla più specifica, è il seguente:
- Stili di base dello user agent. Questi sono gli stili che il browser applica agli elementi HTML per impostazione predefinita.
- Stili utente locali. Queste possono provenire dal livello del sistema operativo, ad esempio la dimensione di carattere di base, o una preferenza di movimento ridotto. Possono anche provenire da estensioni del browser, come un'estensione del browser che consente a un utente di scrivere il proprio codice CSS personalizzato per una pagina web.
- CSS creato. Il CSS di cui sei autore.
- Di:
!important
. Qualsiasi!important
che aggiungi alle tue dichiarazioni dell'autore. - Stili utente locali
!important
. Tutti i!important
provenienti dal livello del sistema operativo, o a livello di estensione del browser. - User agent
!important
. Qualsiasi elemento!important
definito nel CSS predefinito, forniti dal browser.
Se hai un tipo di regola !important
nel CSS che hai creato
e l'utente ha un tipo di regola !important
nel proprio CSS personalizzato, a chi vince il CSS?
Verifica le tue conoscenze
Metti alla prova le tue conoscenze sulle origini a cascata
Verifica le tue conoscenze delle origini a cascata; considera lo stile seguente di regole da varie origini:
Stile user agent
h1 { margin-block-start: 0.83em; }
Bootstrap
h1 { margin-block-start: 20px; }
Stili dell'autore della pagina
h1 { margin-block-start: 2ch; } @media (max-width: 480px) { h1 { margin-block-start: 1ch; } }
Stile personalizzato dall'utente
h1 { margin-block-start: 2rem !important; }
Quindi, dato il seguente codice HTML:
<h1>Lorem ipsum</h1>
Qual è la finale di margin-block-start
delle h1
?
Importanza
Non tutte le regole CSS vengono calcolate come le altre, o condividono la stessa specificità.
L'ordine di importanza, dalla meno importante, a quello più importante è il seguente:
- tipo di regola normale, ad esempio
font-size
,background
ocolor
animation
tipo di regola- Tipo di regola
!important
(che segue lo stesso ordine dell'origine) transition
tipo di regola
I tipi di regole di transizione e animazione attive hanno un'importanza maggiore rispetto alle regole normali.
Nel caso delle transizioni, un'importanza maggiore rispetto ai tipi di regole !important
.
Questo perché quando un'animazione o una transizione diventano attive,
il comportamento previsto è cambiare
lo stato visivo.
Utilizzo di DevTools per scoprire perché alcuni CSS non vengono applicati
Browser DevTools mostra in genere tutti i CSS che potrebbero corrispondere a un elemento e quelli che non vengono utilizzati barrati.
Se il CSS che ti aspetti di applicare non è visualizzato, non corrispondeva all'elemento. In tal caso dovete guardare altrove, magari per un errore ortografico nel nome di una classe o di un elemento oppure per codice CSS non valido.
Verifica le tue conoscenze
Metti alla prova le tue conoscenze sulla cascata
Cascade può essere utilizzato per...