Ciao, e benvenuto nella terza puntata della settantasettesima stagione. La volta scorsa abbiamo costruito l'albero, il modello vivo della pagina. Ma un albero nudo non ha aspetto: ha solo struttura. Oggi vediamo come ogni nodo ottiene il suo aspetto definitivo, il regista che fissa come appare ciascun attore. Il titolo: chi decide l'aspetto.
Anche le regole di stile vengono lette e messe in ordine. Il motore le trasforma in una collezione organizzata: a chi si applica ciascuna regola, e cosa dice. È come il taccuino del regista, ordinato in modo da ritrovare al volo tutte le note che riguardano un certo attore.
Ed ecco il problema difficile: tante note, un attore solo. Per un singolo nodo, possono valere molte regole. Una regola per tutti i paragrafi, una per i paragrafi dentro questa sezione, una per questo paragrafo preciso, le regole di default del browser stesso, e magari una nota appuntata direttamente sull'elemento. Possono contraddirsi: una dice blu, un'altra dice nero. Qualcuno deve decidere il valore finale unico per ogni proprietà. Quella decisione è la cascata.
Come decide la cascata? Sono le regole della gara, in parole povere. Una nota più specifica batte una più vaga: questo attore preciso batte tutti gli attori, che batte il default di casa. L'idea è semplice: più la regola punta con precisione a questo nodo, più peso ha. Tra note ugualmente specifiche, vince l'ultima scritta, perché l'ordine conta. Una nota appuntata direttamente sull'elemento batte quelle che vengono dal foglio di stile. E c'è un jolly che scavalca tutto, da usare con parsimonia, perché spegne l'intera gara e dopo diventa difficile tornare indietro. Il punto è che non è caos: è una classifica definita, e ogni proprietà si risolve per conto suo. Questo nodo può prendere il colore da una regola e la dimensione da un'altra. È esattamente la cascata e la specificità di cui parlammo nella stagione sugli stili.
Poi c'è l'ereditarietà: lo stile di casa che cola verso il basso. Certe proprietà, se non le imposti, vengono prese dal genitore: il colore del testo, il carattere. Altre no: un bordo non si propaga ai figli. Così un attore a cui nessuno ha detto come apparire eredita il default della compagnia da chi lo contiene. Ecco perché impostare il carattere sul corpo della pagina funziona dappertutto: cola giù per l'albero.
E arriva il passo che tutti sottovalutano: i valori concreti, da parole a numeri. Le tue regole sono spesso relative o simboliche: più grande, metà della larghezza del genitore, eredita. Il regista non può mettere in scena più grande; ai macchinisti serve un numero. Così il motore risolve ogni proprietà in un valore concreto e utilizzabile per ogni nodo: le percentuali contro il loro contesto, le dimensioni relative contro il genitore, le parole chiave nei loro valori effettivi. Il risultato è l'albero con lo stile: lo stesso albero del documento, ma ora ogni nodo porta un insieme completo e concreto di proprietà finali. Attenzione: certe cose non possono ancora diventare numeri, centrato ha bisogno della larghezza del palco, ed è il lavoro della prossima puntata. Lo stile risolve quello che può; la messa in scena finisce la geometria.
Un ultimo sguardo al costo, perché qui comincia il nostro filo. Abbinare le regole ai nodi non è gratis: per ogni nodo il motore deve trovare quali regole valgono, e i selettori complicati, lunghe catene di discendenza, sono più lavoro da far combaciare. Per questo i motori leggono i selettori da destra a sinistra, partendo dall'elemento e risalendo, così da scartare in fretta le regole che non c'entrano. E quando cambia qualcosa che tocca lo stile, una classe attivata, il passaggio del mouse, il motore deve ricalcolare lo stile per la parte di albero coinvolta. Quasi sempre è veloce e circoscritto. Ma lo stile è il primo stadio, quindi un cambiamento di stile può propagarsi lungo tutta la catena: ricalcola lo stile, poi forse rimetti in scena, poi ridipingi. Dove cade la tua modifica nella catena comincia proprio qui.
Voglio lasciarti con il modo giusto di pensare lo stile. Lo stile non è una proprietà che metti su un elemento: è il risultato di una gara, risolta per ogni nodo e per ogni proprietà separatamente, tra tutte le regole che potrebbero valere, più ciò che scende dal genitore. Perciò quando un colore non è quello che ti aspetti, non cercare la tua regola: cerca quale regola ha vinto la gara, e perché, se è più specifica, più in basso, o appuntata direttamente. Pensare in termini di gara e di cascata, invece che di comandi che scrivi, è la differenza tra combattere il foglio di stile e capirlo. E ricorda: lo stile ha deciso l'aspetto, ma non ancora il dove.
Per oggi ci fermiamo qui. Abbiamo visto il regista al lavoro: le regole lette e ordinate, la gara della cascata che sceglie un valore finale per ogni proprietà, l'ereditarietà che cola giù dal genitore, e la traduzione da parole relative a valori concreti, che produce l'albero con lo stile. E abbiamo visto affiorare il costo: lo stile è il primo stadio, e un suo cambiamento può scendere lungo tutta la catena. Nella prossima puntata: mettere in scena. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.