Con questo tutorial andiamo a concludere la spiegazione di cascade. Abbiamo visto Stylesheet Origin e Specificity; Source Order è l’ulitmo argomento da trattare per chiudere il cerchio e capire come funzione cascade in tutto il suo insieme.
Quando il conflitto non si risolve con stylesheet origin e la specificity è uguale entra in ballo source order, che è semplicemente basato sull’ordine in cui inseriamo le dichiarazioni, dall’alto verso il basso.
File index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 - The Cascade - Specificity</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 id="main-heading" class="heading">Titolo</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2 id="subheading1" class="heading subheading">Sottotitolo 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsam,
praesentium hic officia voluptates distinctio!
</p>
<h2 id="subheading2" class="heading subheading">Sottotitolo 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsam,
praesentium hic officia voluptates distinctio!
</p>
</body>
</html>
File style.css
.heading { /* specificity 0 0 1 0 */
color: red;
}
.subheading { /* specificity 0 0 1 0 */
color: blue;
}
Ai sottotitoli verrà applicato il colore blu. Analizziamo come si comporta il browser: l’origine dello stile è la stessa, entrambi gli stili provengono dal file style.css, e la specificity è uguale, entrambi le dichiarazioni hanno una sola classe e quindi lo stesso valore. A questo punto il browser passa all’ultimo step che è appunto il source order, da precedenza all’ultima dichiarazione che viene inserita in basso.
Questo è tutto per quanto riguarda cascade, la parte principale e da tenere sempre in mente quando si scrive CSS è la specificity, che ricordo bisogna tenerla il più basso possibile; se riusciamo a raggiungere l’obbiettivo prefissato senza tirare in ballo le id vuol dire che abbiamo fatto uno ottimo lavoro.
Keep coding, e ricordati che every day is a learning day.
