Lo scopo principale dei CSS è separare la presentazione dei nostri dati dalla struttura dei dati. La struttura dei dati è solitamente definita da un linguaggio di markup - tipicamente HTML o XHMTL – e non dovrebbe contenere troppi riferimenti al layout o alla presentazione, che sono invece competenza degli stili CSS. Anche se utilizziamo gli stili CSS tutti i giorni, spesso la nostra abilità si concentra sul conoscere le diverse proprietà dei CSS: sperimentare colori, inserire immagini, smussare i bordi con qualche “trucchetto ad effetto”. A volte ci dimentichiamo di sfruttare le potenzialità della sintassi dei selettori, che permette di mantenere i nostri fogli agili e snelli. Una pratica purtroppo molto diffusa è quella di riempire un intero foglio di stile esterno solo con definizioni di tipo classe (.classe) oppure di tipo ID (#elemento). E' un'abitudine che sarebbe bene perdere, per sfruttare al meglio le potenzialità dei selettori.
Vediamo ad esempio come ottenere un effetto di ereditarietà usando i selettori. Alcuni web designers sentono l'esigenza di definire delle classi in modo ereditario, ad esempio
.padre {
COLOR: green;
FONT-SIZE: 12px;
FONT-FAMILY: Verdana;
}
.figlio {
FONT-SIZE: 8px;
}
Quello che manca, in questo caso, è una sintassi o direttiva CSS che permetta di far ereditare a tutti gli elementi della classe figlio gli attributi del padre (qualcosa come figlio extends padre). Lo scopo sarebbe avere una configurazione generale dello stile nel padre, e poi personalizzare i figli in modo diverso. Nell'esempio qui sopra si vorrebbe poter assegnare uno stile “di default” nel padre (colore verde, corpo 12 e font Verdana), e poi chiedere agli elementi figlio di ereditare lo stesso comportamento, tranne dove diversamente indicato. Il risultato desiderato sarebbe di avere un figlio con queste proprietà
COLOR: green; FONT-SIZE: 8px; FONT-FAMILY: Verdana;
Le specifiche CSS non permettono però di definire la classe figlio come elemento erede del padre, per un motivo ben preciso: il CSS si applica ad un documento (X)HTML, che dovrebbe già contenere un albero gerarchico di elementi: il DOM (Document Object Model). Siccome non è pratico mescolare due gerarchie (quella del DOM e quella, ipotetica, del CSS), la sintassi CSS ci suggerisce di sfruttare la gerarchia già esistente all'interno del DOM.
Vediamo quindi un modo di ottenere l'effetto voluto sfruttando “l'ereditarietà” presente nel documento (X)HTML, unito al cascading dei CSS. Consideriamo ad esempio
<p class="padre">Padre</p>
<p class="padre figlio">Figlio</p>
Questa è una soluzione corretta e spesso anche la più usata. In alcuni casi è però insoddisfacente per due motivi
- Non sfruttiamo le possibilità di definire i selettori in modo adatto all'esigenza (stiamo usando solamente selettori di tipo classe)
- Dobbiamo precisare a mano la “catena dell'ereditarietà” in tutti gli elementi HTML (nel caso qui sopra scrivendo
class=”padre figlio”in tutti gli elementi figlio)
Vediamo come ottenere lo stesso risultato sfruttando meglio le definizioni dei selettori e la gerarchia del DOM. Consideriamo il seguente estratto dal nostro foglio di stile
div.paragraphs > p {
COLOR: green;
FONT-SIZE: 12px;
FONT-FAMILY: Verdana;
}
.son {
FONT-SIZE: 8px;
}
E il codice HTML
<div class="paragraphs">
My family
<p>Father</p>
<p>Mother</p>
<p class="son">Son</p>
</div>
Il risultato sarà che tutti i paragrafi all'interno di questo div, ad eccezione di quello marcato come son, avranno lo stile voluto (verde, corpo 12 e Verdana) , mentre son avrà quello “ereditato” dal padre con la nuova specializzazione (verde, corpo 8 e Verdana). Il merito è della definizione
div.paragraphs > p { ecc... }
che specifica lo stile di tutti e soli gli elementi <p> direttamente figli dell'elemento <div>. Notare che questa scelta permette di ignorare la frase “My family”, permettendoci di visualizzarla con lo stile definito altrove (ad esempio quello del body). Se scrivessimo invece
div.paragraphs { ecc... }
allora la definizione dello stile del <div> impatterebbe tutti gli elementi al suo interno, compreso la frase “My family”. Nessuna delle due soluzioni è migliore dell'altra, la scelta dipende da ciò che vogliamo ottenere. Quello che ci interessa notare, ai fini dell'ereditarietà, è che questo modo di lavorare permette di ottenere risultati molto simili a quelli menzionati all'inizio dell'articolo. La differenza è che adesso stiamo sfruttando la gerarchia padre-figlio degli elementi (X)HMTL, che è determinata dai contenuti, non dalla presentazione!
L'idea di sfruttare la struttura dei contenuti è un ottimo punto di partenza per definire aspetto e presentazione, perché permette di introdurre l'ereditarietà degli stili in modo naturale. Ovviamente potremo sempre intervenire “manualmente” dove necessario, gestendo le eccezioni con qualche foglio di stile in linea (meglio se pochi).
Articoli correlati
- Gestire le animazioni in JavaScript
- Emulare Linux su Windows con Cygwin
- Implementazione pratica degli standard W3C
