Podcast su CSS - 004: The Cascade
CSS è l'acronimo di Cascading Stylesheets. La cascata è l'algoritmo per la risoluzione dei conflitti in cui a un elemento HTML vengono applicate più regole CSS. È il motivo per cui il testo del pulsante impostato con il seguente CSS sarà blu.
button {
color: red;
}
button {
color: blue;
}
La comprensione dell'algoritmo a cascata consente di capire in che modo il browser risolve conflitti di questo tipo. L'algoritmo a cascata è suddiviso in quattro fasi distinte.
- Posizione e ordine di visualizzazione: l'ordine di visualizzazione delle regole CSS.
- Specificità: un algoritmo che determina quale selettore CSS ha la corrispondenza più elevata.
- Origine: l'ordine di visualizzazione del CSS e la sua provenienza, che si tratti di uno stile del browser, di CSS da un'estensione del browser o del CSS creato.
- Importanza: alcune regole CSS hanno un peso maggiore di altre,
soprattutto con il tipo di regola
!important.
Posizione e ordine di apparizione
L'ordine di visualizzazione delle regole CSS e di come vengono visualizzate viene preso in considerazione dalla cascata durante il calcolo della risoluzione dei conflitti.
La demo all'inizio di questa lezione è l'esempio più diretto della posizione. Esistono due regole con selettori con specificità identica, quindi l'ultima da dichiarare come vinta.
Gli stili possono provenire da varie origini su una pagina HTML, ad esempio un tag <link>, un tag <style> incorporato e CSS incorporato come definito nell'attributo style di un elemento.
Se hai un <link> che include CSS nella parte superiore della pagina HTML,
allora un altro <link> che include CSS nella parte inferiore della pagina: l'<link> in basso avrà la massima specificità.
La stessa cosa accade anche con gli elementi <style> incorporati.
Più sono specifici, più si trovano nella parte inferiore della pagina.
<link />.
Una regola CSS che imposta lo stato scuro si trova in un secondo foglio di stile collegato e viene applicata a causa della sua posizione successiva.Questo ordinamento si applica anche agli elementi <style> incorporati.
Se vengono dichiarati prima di <link>, il CSS del foglio di stile collegato avrà la massima specificità.
<style> è dichiarato in <head>,
mentre l'elemento <link /> è dichiarato in <body>.
Ciò significa che diventa più specifico rispetto all'elemento <style>.Un attributo style incorporato in cui è stato dichiarato il CSS sovrascrive tutti gli altri CSS, indipendentemente dalla sua posizione, a meno che per una dichiarazione non sia stato definito !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 è stato dichiarato prima dello sfondo viola, ora viene ignorato dal browser.
.my-element {
background: green;
background: purple;
}
La possibilità di specificare due valori per la stessa proprietà
può essere un modo semplice per creare elementi di riserva per i browser che non supportano un valore specifico.
Nel prossimo esempio, font-size viene dichiarato due volte.
Se clamp() è supportato nel browser, la precedente dichiarazione font-size verrà ignorata.
Se clamp() non è supportato dal browser, la dichiarazione iniziale verrà 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 la tua comprensione
Verifica le tue conoscenze della cascata
Se hai il seguente codice HTML sulla tua pagina:
<!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?
<style> incorporata si trova più in basso rispetto al tag <link>. Di conseguenza, anche se la specificità di button è la stessa, la posizione della regola di stile lo fa vincere.
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 fare in modo che venga applicata anche se un altro CSS corrispondente al selettore compare in un secondo momento nel CSS.
Nella prossima lezione scoprirai i dettagli del metodo di calcolo della specificità. Tuttavia, tenendo a mente alcuni aspetti, potrai evitare troppi problemi di specificità.
Il CSS che ha come target una classe su un elemento renderà la regola più specifica e quindi considerata più importante da applicare rispetto al solo target CSS che ha come target 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 aggiunta in un secondo momento 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 puoi vedere nella prossima lezione, a ogni tipo di selettore vengono assegnati punti che indicano il livello di specificità. I punti di tutti i selettori utilizzati per scegliere un elemento come target vengono sommati.
Ciò significa che se scegli come target un elemento con un elenco di selettori come a.my-class.another-class[href]:hover, ottieni qualcosa di piuttosto difficile da sovrascrivere con altri CSS.
Per questo motivo, e per rendere il tuo CSS più riutilizzabile,
è consigliabile mantenere i selettori il più semplici possibile.
Usa la specificità come strumento per individuare gli elementi quando necessario, ma considera sempre il refactoring di elenchi di selettori lunghi e specifici, se possibile.
Origin
Il CSS che scrivi non è l'unico CSS applicato a una pagina. La cascata prende in considerazione l'origine del CSS. Questa origine include il foglio di stile interno del browser, gli stili aggiunti dalle estensioni del browser o il sistema operativo e il CSS 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 degli utenti locali. Queste possono essere a livello di sistema operativo, ad esempio una dimensione carattere di base o una preferenza relativa a movimento ridotto. Possono anche provenire da estensioni del browser, ad esempio un'estensione del browser che consente a un utente di scrivere il proprio CSS personalizzato per una pagina web.
- CSS creato. Il CSS di cui sei autore.
- Data di creazione:
!important. Qualsiasi elemento!importantche aggiungi alle tue dichiarazioni create. - Stili degli utenti locali
!important. Qualsiasi elemento!importantproveniente dal CSS a livello di sistema operativo o di estensione del browser. - User agent
!important. Tutti gli elementi!importantdefiniti nel CSS predefinito, fornito dal browser.
Se nel CSS che hai creato è presente un tipo di regola !important e l'utente ha un tipo di regola !important nel proprio CSS personalizzato, quale CSS vince?
Verifica la tua comprensione
Verifica le tue conoscenze sulle origini delle cascate
Verifica la tua conoscenza delle origini di Cascade, considera le seguenti regole di stile di varie origini:
Stile user agent
h1 { margin-block-start: 0.83em; }
Bootstrap
h1 { margin-block-start: 20px; }
Stili autore 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 HTML:
<h1>Lorem ipsum</h1>
Qual è l'ultimo margin-block-start di h1?
!important ha l'origine più specifica.Importanza
Non tutte le regole CSS vengono calcolate in modo uguale o hanno la stessa specificità tra loro.
L'ordine di importanza, dal meno importante al più importante è il seguente:
- tipo di regola normale, come
font-size,backgroundocolor animationtipo di regola!importanttipo di regola (seguendo lo stesso ordine dell'origine)transitiontipo di regola
I tipi di regole di transizione e di animazione attiva hanno un'importanza maggiore rispetto alle regole normali.
In caso di transizioni di importanza maggiore rispetto a !important tipi di regole.
Questo perché, quando un'animazione o una transizione diventano
attiva, si prevede di cambiare lo stato visivo.
Utilizzo di DevTools per capire perché alcuni CSS non vengono applicati
Gli strumenti DevTools in genere mostrano tutti i CSS che potrebbero corrispondere a un elemento, con quelli che non vengono utilizzati barrati.
Se il codice CSS che avevi previsto di applicare non viene visualizzato, significa che non corrisponde all'elemento. In questo caso devi cercare altrove, ad esempio per un errore ortografico nel nome di una classe o di un elemento o un codice CSS non valido.
Verifica la tua comprensione
Verifica le tue conoscenze della cascata
Cascade può essere utilizzato per...