La cascata

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.

  1. Posizione e ordine di apparizione: l'ordine con cui vengono visualizzate le regole CSS
  2. Specificità: un algoritmo che determina quale selettore CSS ha la corrispondenza più efficace.
  3. 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
  4. 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.

Il pulsante ha uno sfondo blu, come definito da CSS, che è incluso da un elemento <link />. Una regola CSS che lo imposta come scuro si trova in un secondo foglio di stile collegato e viene applicata in base alla sua posizione successiva.

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à.

L'elemento <style> è dichiarato in <head>, mentre l'elemento <link /> è dichiarato in <body>. Ciò significa che ha una maggiore specificità rispetto all'elemento <style>

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);
}
di Gemini Advanced.

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?

rosa
L'origine <style> incorporata si trova più in basso nella pagina rispetto <link>, pertanto, sebbene la specificità di button sia la stessa, position della regola di stile, fa sì che vinca.
giallo
Nel documento HTML, lo sfondo del pulsante giallo potrebbe essere stato letto ma una regola più recente con la stessa specificità è stata scoperta in seguito, rendendo questa regola non applicabile al 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:

  1. Stili di base dello user agent. Questi sono gli stili che il browser applica agli elementi HTML per impostazione predefinita.
  2. 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.
  3. CSS creato. Il CSS di cui sei autore.
  4. Di: !important. Qualsiasi !important che aggiungi alle tue dichiarazioni dell'autore.
  5. Stili utente locali !important. Tutti i !important provenienti dal livello del sistema operativo, o a livello di estensione del browser.
  6. User agent !important. Qualsiasi elemento !important definito nel CSS predefinito, forniti dal browser.
Una dimostrazione visiva dell&#39;ordine delle origini, come spiegato anche nell&#39;elenco.

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?

20 px
Il bootstrap fa parte dell'origine di origine, che perde l'importante stile utente locale.
0,83 em
L'origine dello stile dello user agent perde a favore dell'importante stile utente locale.
2rem
Questo stile personalizzato dell'utente !important ha l'origine più specifica.
2 canali
Questo stile dell'autore fa parte dell'origine dell'autore, che perde l'importante stile locale dell'utente.
1 catena
Questo stile dell'autore fa parte dell'origine dell'autore, che perde l'importante stile locale dell'utente.

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:

  1. tipo di regola normale, ad esempio font-size, background o color
  2. animation tipo di regola
  3. Tipo di regola !important (che segue lo stesso ordine dell'origine)
  4. 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.

Un&#39;immagine del browser DevTools con CSS sovrascritto barrato

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...

Risolvere i conflitti quando si applicano più stili a un elemento.
Questo è uno dei suoi obiettivi principali: la risoluzione dei conflitti.
Assicurarsi che sia presente un solo valore di stile per ogni proprietà al momento dell'estrazione.
Il testo può essere di un solo colore e Cascade è un modo per determinare quale dovrebbe essere.
Regole di stile per la valutazione di punteggio e ponderazione.
Valutazione e ponderazione fanno parte della fase di ordinamento di The Cascade.
Attributi di stile di ordinamento e filtro.
Le fasi di ordinamento e filtro di Cascade sono utili per comprendere gli aspetti della risoluzione dei conflitti.

Risorse