Specificità, ereditarietà e override dei css, vediamoli in azione con il plugin Page Style

Teoria e pratica Potrebbe essere interessante riuscire ad abbinare la semplice teoria con qualcosa di immediatamente pratico, come il riuscire […]
Specificità, ereditarietà e override dei css, vediamoli in azione con il plugin Page Style

Teoria e pratica

Potrebbe essere interessante riuscire ad abbinare la semplice teoria con qualcosa di immediatamente pratico, come il riuscire ad utilizzare al meglio un plugin di wordpress. In questo articolo cercherò di spiegarti il funzionamento che sta alla base della cosiddetta “struttura a cascata” dei css, ma prima ancora ti voglio introdurre questo interessante plugin che qualche giorno fa ho trovato in rete.

Page Style

Page Style, scaricabile dal repository ufficiale di WordPress, consente di attribuire in maniera dinamica una classe css al body in relazione al tipo di pagina che viene valorizzata in GET e che quindi stai in quel momento visualizzando. Il plugin è composto da una sola pagina php in cui vengono definite le alternative possibili tramite un costrutto if. Non entrando nei meriti della sintassi php, il plugin risulta essere interessante perchè consente di avere un punto di riferimento per stilizzare o differenziare con un opportuno override, le diverse tipologie di pagine del nostro blog.

Hai dimestichezza con i termini di ereditarietà, specificità e override dei css?

Nessun problema, cercherò di spiegarteli cosi che tu possa utilizzare in pieno questo interessante plugin. Facciamo un passo indietro e partiamo col dire che l’acronimo C.S.S. sta per Cascading Style Sheets; come? Ok, forse sono partito da troppo indietro, ma è meglio non lasciare nulla al caso. La struttura ad albero di un documento html ti consente di “intercettare” un elemento come un paragrafo, uno span o un div con particolare precisione grazie agli svariati selettori messi a disposizione. Per determinare quali valori di colore, larghezza, o altezza verranno attribuiti a quello stesso elemento che stiamo intercettando concorrono l’ereditarietà che non è altro che il meccanismo tramite il quale si tramandano questi valori da padre a figlio e la specificità che consiste nella “forza” che una regola può avere rispetto ad un’altra. Gli strumenti indispensabili per lavorare al meglio? Firebug e WebDeveloper, già analizzati in questo precedente articolo.

Un semplice esempio

Analizziamo nel dettaglio la specificità prendendo in esame queste due regole css. Ovviamente soltanto una delle due regole può avere la meglio. Come si può sapere a priori quale regola avrà successo? In base a quanto detto, quale regola avrà la meglio sull’altra? Di che colore saranno i titoli h2?

h2.titolo {
    color:yellow;
}
h2 {
    color:red;
}

Un pò di teoria

La risposta, oltre che nell’ereditarietà, si trova nella specificità di ogni selettore. La regola con specificità maggiore prevarrà sulla regola che ha specificità minore. Calcolarla è facile, essa è composta idealmente da 4 valori separati da virgola

SPECIFICITA’ = 0,0,0,0

e ogni tipologia di selettore (ID, classe, …) attribuisce un unità al canale di riferimento. Dal punto di vista puramente teorico avremo che:

1) Per ogni ID, si aggiunge 0,1,0,0
2) Per ogni classe, pseudo-classe e selettore di attributo si aggiunge un 0,0,1,0
3) Per ogni elemento e pseudo-elemento, si aggiunge un 0,0,0,1

mentre…

4) La specificità del selettore universale sarà pari a 0,0,0,0 che è diverso dal dire che non ne ha.
5) La specificità del selettore in linea è pari a 1,0,0,0 (il massimo).

infine

6) Le dichiarazioni a cui è stato abbinato !important prevaranno a prescindere su tutte le restanti dichiarazioni che non posseggono questo attributo. Tutte queste dichiarazioni sono raggruppate a se e i conflitti di specificità sono risolti all’interno del gruppo.

Facciamo due conti

Per mettere in pratica quanto detto fin’ora, mi ricollego all’esempio di prima sul titolo h2 e vediamo quale dei due selettori ha più specificità. Ti ricordo che l’interprete, ogni volta che deve calcolare la specificità, analizza ogni singolo selettore e li scompone, attribuendo ad ognuna delle sottoparti i valori corrisponmdenti. Nel caso seguente ho creato una sorta di equazione matematica per esemplificare il meccanismo di calcolo:

h2.titolo{color:yellow} = (h2) + (.titolo) = (elemento) + (classe) = (0,0,0,1) + (0,0,1,0) = 0,0,1,1
h2{color:red} = h2 = elemento = 0,0,0,1

Si evince dalle precedenti equazioni che 0,0,1,1 è maggiore di 0,0,0,1 e di conseguenza si avrà che nella pagina tutti i titoli h2 saranno di colore rosso mentre tutti i titoli h2 con classe titolo, saranno gialli. Il giallo prevarrà sul rosso a causa di una specificità maggiore.

Come funziona un browser?

Sia l’ereditarietà che la specificità concorrono a defiire l’organizzazione a cascata dei documenti css. Le regole che gestiscono l’organizzazione a cascata sono abbastanza semplici: l’interprete prende in considerazione tutti i selettori comuni ad un determinato elemento. Vengono quindi controllate tutte le dichiarazioni comuni in base al loro peso; le regole marcate come !important avranno un peso maggiore. Se per uno stesso elemento abbiamo dichiarazioni in conflitto ma tutte hanno lo steso peso, si valuta la specificità delle stesse scartando quelle che hanno una specificità minore. Infine se due o piu regole relative ad uno stesso elemento hanno lo stesso peso e specificità, si prende in considerazione l’ordine con cui vengono elencate. Quella che viene dopo prevale sempre (a parità di condizioni ovviamente).

L’override

Siamo infine giunti all’argomento cardine di quest’articolo: l’override. Strettamente connesso ai concetti prima descritti di specificità e ereditarietà, esso ci consente di “sovrascrivere” le regole css a nostro piacimento. Vediamo subito in cosa consiste e come poterlo utilizzare concretamente. Per farlo mi ricollego al plugin di wordpress page style. Come dicevo all’inizio dell’articolo Il plugin risulta essere interessante perchè consente di avere un punto di riferimento per stilizzare o differenziare con un opportuno override, le diverse tipologie di pagine del nostro blog. Più nel dettaglio il plugin setta nel tag body una classe css a cui possiamo “aggrapparci” per dare maggiore specificità ad un selettore.

Esempio di override

La pagina elenco articoli di una categoria, ad esempio, ha la stessa formattazione della pagina elenco articoli relativi ad un particolare tag, o anche all’elenco articoli generata da una chiave di ricerca. Come riuscire quindi a dare un colore diverso ai titoli di una pagina laciando invariati quelli delle restanti, se i riferimenti nel css e nell’html sono identici?

Semplice, individua la pagina che intendi differenziare, analizza con firebug il tag body e leggi il nome della classe che gli è stata attribuita dal plugin. Nel css, dove vengono definiti e formattati in via generica i titoli degli articoli:

#titolo {
    color:#666666
}

…basterà scrivere:

body.nomeclasse #titolo{
    color:red
}

La semplice aggiunta di body.nomeclasse basterà a dare maggiore specificità alla dichiarazione relativa ai titoli e solo in quella particolare pagina referenziata da quella classe (ad esempio body.search) il colore rosso dei titoli verrà valorizzato.

Come è strutturato il plugin

Il plugin adopera delle scelte di attribuzione delle classi che non condivido in pieno. Mi sembrava piu congruo e corretto dare nomi generici alle classi relative al body e non relativi ad una particolare categoria o articolo, così l’ho modificato come segue, anche se le varianti possono essere disparate. Dipende da te!

if (is_home()) :
	$class = "home";
elseif (is_search()) :
	$class = "search";
elseif (is_single() || is_page()) :
	$class = "single";
elseif (is_date()) :
	$class = "archive";
	if (is_year()) :
		$class .= " year";
	elseif (is_month()) :
		$class .= " month";
	elseif (is_day()) :
		$class .= " day";
	endif;
elseif (is_author()) :
	$class = "author";
elseif (is_404()) :
	$class = "404";
elseif (is_category()) :
	$class = "category";
endif;
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github