css-the-source-order-thumbnail

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.

Guarda il video:

Articoli simili