CSS3: imparare le variabili

Da qualche anno è possibile utilizzare i fogli di stile con le variabili. Attualmente il tasso di adozione di questa tecnologia è piuttosto elevato, siamo intorno al 95% di copertura dei browser. Indicativamente un browser più vecchio del 2016 potrebbe avere qualche problema o non riuscire ad interpretare il comando, che comunque nel peggiore dei casi verrebbe ignorato o rimpiazzato dalle impostazioni di default.

Il funzionamento non è complicato, vediamo un esempio semplice ma efficace come ad esempio la definizione di un colore. In genere nei fogli di stile di tende ad usare dei colori ricorrenti, anche per dare un senso di uniformità, ad esempio i colori dei pulsanti, di alcuni link, di alcuni titoli o contorni di qualche “div”. Quindi è molto probabile, per non dire certo, che un dato gradiente lo andremo ad applicare più e più volte.

#titolo { 
    color: #d33656;
}

.button {
    color: #d33656;
}

Ora immaginiamo che lo vogliamo cambiare. Dovremo andare a cercare ognuno di questi e cambiarlo. Non è una operazione difficile, anzi con i moderni IDE o Editor si riesce a fare facilmente. Ma esiste una strada più semplice che appunto risponde al nome di “CSS Variables”.

Vediamo un esempio pratico riprendendo l’esempio precedente:

:root {
    --rossiccio: #d33656;
}

#titolo { 
    color: var(--rossicio);
}

.button {
    color: var(--rossicio);
}

Come si può vedere abbiamo dichiarato in una particolare classe che si chiama :root un oggetto anticipato da due linee. Il nome dell’oggetto non esiste in CSS, quindi lo abbiamo inventato noi, a questo gli abbiamo assegnato, diviso dai due punti un valore che si vede in modo piuttosto chiaro essere un colore in formato esadecimale. Ma avrebbe potuto essere qualsiasi altra cosa. Di fatto non stiamo dichiarando cosa è quell’oggetto, un colore, una dimensione eccetera, ma stiamo solo assegnando qualcosa ad un oggetto.

All’interno delle classi che saranno realmente utilizzate abbiamo richiamato il nostro oggetto, all’interno della dichiarazione speciale “var()” che in questo caso è il valore del colore. In questo caso invece la correlazione deve essere corretta, cioè dobbiamo essere certi di assegnare a “color” un valore relativo ad un colore e non ad esempio lo spazio di un padding o lo z-index di un livello.

Come si può intuire cambiando il valore di –rossiccio cambieremo tutte le istanze. E’ una constatazione piuttosto importante, perché ad esempio possiamo manipolare tramite Javascript questo valore e modificarlo. Ad esempio va molto di moda il tema scuro, ma come trasformare un sito in tema scuro all’occorrenza? questa sicuramente è una strada percorribile.

Globale o locale

Facciamo un piccolo passo in avanti, con la definizione di :root abbiamo indicato che quella variabile di fatto è globale, la possiamo usare ovunque. Tuttavia potrebbero esserci situazioni dove questo non ci va bene, e quindi sarebbe più conveniente avere una dichiarazione che permetta l’uso locale delle variabili. Questo è possibile, vediamo l’esempio seguente:

.mydiv {
    --evidenzia: #e6e600;
}

.mydiv p {
    background-color: var(--evidenzia);
    color: var(--rossiccio);
}

In questo caso abbiamo definito la variabile dentro una classe che esiste, cioè “mydiv”. Abbiamo poi richiamato la variabile dentro una sotto classe, cioè un paragrafo di mydiv dove abbiamo inserito sia la nostra variabile locale per il colore di sfondo, che la variabile globale per il colore.

Un esempio con Javascript

Prima ho fatto accenno a Javascript, vediamo un esempio pratico che fa comprendere come possiamo manipolare in modo dinamico le variabili CSS, utilizzando sempre gli esempi precedenti.

var root = document.querySelector(':root');  
var rootCS = getComputedStyle(root);  
var rossiccio = rootCS.getPropertyValue('--rossiccio');
console.log(rossiccio);   
// otterremo'#d33656'

Con la prima variabile abbiamo isolato la query su :root, mentre con la variabile rootCS abbiamo estratto dalla prima l’oggetto CSS, che appunto come sappiamo era –rossiccio. A questo punto si è trattato solo di ottenerne il valore relativo.

Fatti questi passaggi diventa piuttosto semplice cambiare al volo il valore di rossiccio usando la funzione di Javascript setProperty.

root.style.setProperty('--rossiccio', '#33cc33')

In questo caso abbiamo trasformato il colore da rossiccio ad un verde tenue.

Conclusioni

Abbiamo portato per semplicità didattica come esempio il cambio di colore, ma di fatto si può cambiare qualsiasi altra cosa, rendendo di fatto le potenzialità davvero infinite.