Variabili CSS: cosa sono e quali browser le supportano

Con l'implementazione di Chrome 49 gli sviluppatori di Mountain View hanno messo recentemente a disposizione il pieno supporto per le variabili CSS; si tratta di una feature attesa da tempo, in particolare per le sue rilevanti implicazioni sul lavoro dei coders ai quali forniscono un strumento che consente di massimizzare la produttività delle sessioni di lavoro, sia in fase di realizzazione di un progetto che nei non di rado frequenti interventi per l'aggiornamento e la manutenzione.

Le variabili CSS, ma sarebbe più corretto parlare di proprietà CSS personalizzabili, funzionano in modo simile ai medesimi costrutti già presenti in numerosi linguaggi per lo sviluppo. Si tratta in sostanza di spazi di memoria destinati a contenere delle informazioni, ad esempio dei valori, utilizzabili più volte facendo semplicemente riferimento alle variabili associate. Queste ultime potranno essere sfruttate per ridurre quanto più possibile le ripetizioni nella stesura del codice.

A livello pratico le variabili CSS rappresentano una sorta dei estensione della logica dei fogli di stile, se infatti essi hanno permesso di intervenire sulle regole per la formattazione di un intero sito Internet senza dover modificare manualmente le singole pagine Web, le CSS custom properties consentiranno di modificare una sola volta il valore di una proprietà con la certezza che tale cambiamento avrà influenza su tutte le ricorrenze successive della medesima variabile.

Dal punto di vista della sintassi le novità sono sostanzialmente due: la funzione var(), a cui passare come argomento il nome della proprietà personalizzata, e le proprietà stesse (--nome-proprietà). Con var() si potrà richiamare il valore associato ad un proprietà personalizzata per un'altra proprietà, si tenga però presente che i nomi delle proprietà personalizzate potranno essere sì scelti arbitrariamente, ma sono case sensitive, motivo per il quale "--nome-proprietà" non potrà essere richiamato tramite "--Nome-proprietà" o altre varianti dello stesso tipo.

Un semplice esempio di utilizzo delle variabili CSS potrebbe essere il seguente, dove il colore associato a --arbitrary-color viene riutilizzato per la proprietà color nella regola successiva:

:root {
  --arbitrary-color: #00c;
}
#pippo h2 {
  color: var(--arbitrary-color);
}

Oltre alla riusabilità le variabili CSS forniscono altri due vantaggi, possono essere valorizzate più volte all'interno dello stesso listato e supportano l'ereditarietà, quindi qualsiasi chiamata successiva alla modifica di un valore terrà conto di quest'ultimo intervento. E' naturalmente possibile valorizzare proprietà personalizzate con altre definite in precedenza:

:root {
  --arbitrary-color: #c00;
  --new-color: var(--arbitrary-color);
}

Attualmente, oltre al già citato Chrome 49, le variabili CSS sono supportate in Firefox 43 o superiore, Safari 9.1 e Safari su iOS 9.3, non in Internet Explorer, Microsoft Edge, Opera, Android Browser e Chrome per Android.

Via Google Developers - Immagine: Can I Use