[GUIDA CSS #14] Cascade, ereditarietà e specificità


[GUIDA CSS #14] Cascade, ereditarietà e specificità

Entriamo oggi nel cuore del meccanismo dei CSS andando ad analizzare tre concetti fondamentali: Cascade, ereditarietà e specificità. Leggete questa guida con molta attenzione perché oggi capiremo come i CSS gestiscono le proprietà e la precedenza delle regolole.

Il primo concetto che andiamo ad analizzare è quello di Ereditarietà. Secondo le proprietà dei fogli di stile infatti, la formattazione che noi applichiamo ad un certo elemento ricade anche sui suoi discendenti. Ad esempio, se applichiamo un color:red; a <body>, a tutti gli elementi all’ interno di <body> verrà applicata la formattazione del testo in rosso. Questo accade se non impostiamo parametri diversi per gli elementi discendenti, in questo caso la formattazione di <body> non influirà sugli altri elementi. Non tutti gli elementi godono del concetto di ereditarietà, tra i più importanti ricordiamo border, padding e background.

Nella stesura di un foglio di stile è necessario capire anche come, a volte, gli stili possono andare in conflitto tra di loro. Facciamo un rapido esempio:

p {color: white;}
.paragrafo {color: black;}

<p class=”paragrafo”>Qui il tuo paragrafo</a>

In casi come questi quale stile preverrà sull’ altro? Il paragrafo verrà formattato in nero, difatti il selettore prevale sull’ elemento principale ma, prima di capire meglio il concetto, bisogna aver chiaro il concetto di peso, ossia rispondere alla domanda: quant’è importante una specifica regola? Per far questo bisogna capire quali sono questi “criteri di importanza“, il primo che dovete sapere è costituito dalla gerarchia dei fogli di stile che entrano in gioco quando un visitatore arriva sulla nostra pagina web. Ecco l’ ordine con cui prevalgono i fogli di stile:

  1. CSS dell’ autore
  2. CSS dell’ utente
  3. CSS predefinito del browser

Le impostazioni sono modificabili dal browser stesso che permette di utilizzare anche un CSS scritto dall’ utente stesso e di ignorare quello scritto dall’ autore.

Prima ho parlato di peso e, in questo caso come non mai, è importante venire a conoscenza del concetto di specificità. Essa si basa su uno specifico calcolo effettuato sulle regole del nostro foglio di stile e il risultato che otterremo è costituito da 3 numeri: il primo non è nient’ altro che il numero di ID presenti nella regola, il secondo invece è il numero delle classi e pseudo classi presenti, mentre il terzo è il numero degli elementi. Facciamo un esempio:

#pippo {color: black;}

In questa regola è presente un solo ID, il risultato finale sarà quindi: 1-0-0.

.pippo {color: red;}

In questa regola è presente invece una sola classe, il risultato finale sarà quindi: 0-1-0.

p {color: white;}

In questa regola è presente un solo elemento, il risultato finale sarà quindi: 0-0-1.

Potete capire da voi stessi che l’ ID assume un peso più elevato e che, di conseguenza, prevarrà sulla classe che a sua volta prevarrà sul semplice elemento. Ed eccoci giunti infine al concetto di Cascade, parola derivante dall’ argomento della guida stessa: CSS (Cascading Style Sheets). Per riassumerlo, ecco quali sono i passaggi di un browser durante il rendering della pagina web:

  1. Controllare il valore dell’ attributo media. Di conseguenza scartare i supporti non specificati;
  2. Ordinare i CSS per peso e origine, esattamente come abbiamo visto sopra;
  3. Calcolare la specificità dei selettori;
  4. Applicare la regola.

Ultima cosa da tenere ben presente, ossia come prevalgono i fogli di stile tra di loro: quelli in linea prevalgono su quelli incorporati che, a loro volta, prevalgono su quelli collegati. Per dubbi o chiarimenti commentate l’ articolo, alla prossima! 😉

<- Lezione precedente (Unità di misura e relativi valori)
Lezione successiva (Gestire gli elementi nella pagina: il box model) ->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *