css- the-cascade-thumbnail-intro

Ehi gente del web, in questo tutorial si introduce il concetto di cascade e perchè è importante sapere come funziona. E’ fondamenatale comprendere e fare propri questi passaggi perchè sono la base del CSS, e come ogni struttura se ha buone fondamenta regge, altrimenti, col passare del tempo, crolla.

Spesso ci sono diversi vie per raggiungere lo stesso risultato con il CSS, una cosa necessaria da fare come sviluppatori è cercare di prendere la strada migliore per arrivare all’obbiettivo prefissato. Il primo step è capire come il browser interpreta le direttive che gli diamo. Ogni direttiva è di per se diretta, ma quando ne diamo due o più per le stesso elemento si possono creare dei conflitti, ed è qui che entra in gioco cascade.

Cascade determina come i conflitti vengono risolti.

Per risolvere i conflitti cascade si basa su tre fattori:

  1. Prima di tutto controlla Stylesheet origin: da dove viene lo stile. Lo stile che noi applichiamo è connesso allo stile che ogni browser applica ha di default, ogni browser ha appunto un proprio stile, molto simile fra i diversi browsers. User agent styles sono gli stili che ogni browser applica, author styles sono gli stili che noi applichiamo.
  2. Poi prende in considerazione Selector Specificity: quale selettore ha la precedenza sugli altri?
  3. Infine, se non ha ancora risolto il conflitto controlla il Source Order:  ordine in cui gli stili vengono dichiarati nel file css, dall’alto verso il basso. E vorrei fermarmi un attimo su questo punto. Alcuni bonariamente spiegano il concetto di cascade dicendo che funziona a cascata, dal nome cascade, ovvero dall’alto verso il basso, l’ultima dichiarazione che viene inserita è quella con maggiore priorità. Ma non è così. Il concetto di cascata , dall’alto verso il basso, lo applichiamo non al modo in cui inseriamo le dichiarazioni ma ai tre punti elencati, stylesheet origin, selector specificity e source order. Il browser prima controlla l’origine, se lo stile viene dalla stassa fonte allora passa al punto due, e prende in cosiderazione la specifity, che è  determinata dal selector, e ogni selector ha un determinato valore. Se, infine, anche la specificty è uguale, allora si passa al punto tre, source order, in che ordine inseriamo gli stili.

File: index.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS3 - The Cascade</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 id="main-title" class="title">Titolo</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </body>
</html>

File: style.css

h1 { /* name selector */
  color: red;
}
#main-title { /* id selector */
  color: blue;
}
.title { /* class selector */
  color: green;
}

Con il codice sopra il mio obbietivo è quello di cambiare il colore al titolo e ho la possibilità di farlo in tre diversi modi, tramite il name selector, selezionando l’h1, tramite l’id selector, oppure tramite il class selector. Lo stile al momento non è applicato perchè non ho salvato il file CSS. Ognuna di queste direttive che sto dando al browser ha una dichiarazione diversa: rosso, blu e verde.

Quale di queste avrà la migliore?

Output:

Ha vinto il blu.

Analizziamo cos’è successo: il browser ha per prima controllato la stylesheet origin: da dove viene lo stile? Lo stile viene tutto dalla stesse orgine, author styles. Allora è passato alla seconda fase, selector specificity, qui ha trovato che la specifity del selector id è più alta della specificity del selector name e del selector class, allora ha applicato la dichiarazione relativa al selector id.

Avendo già risolto il conflitto non prende in considerazione il punto tre, source order, infatti, nonostante la dichiarazione con il valore green sia stata messa per ultima, non viene presa in considerazione. 

Concetti semplici ma fondamentali, nei prossimi tutorial tratteremo punto per punto: stylesheet origin, selector specificity, source order.


Guarda il video:

Articoli simili