Variabili CSS: il tutorial sulle custom properties native

Le CSS Custom Properties (più conosciute come variabili CSS) sono un bel passo avanti per chi lavora sul front-end. Portano nel CSS la potenza delle variabili: meno ripetizioni, codice più leggibile e più margine di manovra.

In più, a differenza delle variabili dei preprocessori CSS, le variabili CSS fanno parte del DOM, e questo porta parecchi vantaggi. Per il resto funzionano come le variabili di SASS e LESS. In questo tutorial ti mostro con degli esempi come funziona questo modulo CSS3.

Perché usare le variabili CSS?

Le ragioni per usare le variabili in CSS sono tante. La più convincente è che riducono le ripetizioni nel foglio di stile.

Il metodo di prima

#title {
    color: #ff0000;
}

.h1 {
    color: #ff0000;
}

Il metodo nuovo

:root {
    --red: #ff0000; /* Déclaration d'une variable css */
}
#title {
    color: var(--red); /* Utilisation de la variable css */
}

.h1 {
    color: var(--red); /* Utilisation de la variable css */
}

Non solo il codice diventa più facile da leggere, ma hai anche più libertà il giorno in cui vuoi cambiare quel colore.

Con SASS e LESS tutto questo è possibile da anni. Le variabili CSS, però, hanno qualche vantaggio in più.

1. Non hanno bisogno di essere compilate per funzionare, perché sono native del browser. Non ti serve quindi nessuna configurazione per iniziare, al contrario di SASS e LESS
2. Vivono nel DOM, il che apre un mucchio di possibilità che vediamo in questo tutorial.

Cominciamo a imparare le variabili CSS!

Dichiarare la tua prima variabile CSS

Per dichiarare una variabile devi prima decidere in quale ambito deve vivere. Se la vuoi disponibile ovunque, definiscila nella pseudo-classe :root, che corrisponde all’elemento radice dell’albero del documento (di solito il tag <html>).

Dato che le variabili si ereditano, così la rendi disponibile in tutta l’applicazione: ogni elemento del DOM è un discendente del tag <html>.

:root {
    --main-color: #00FF00; /* Déclaration d'une variable css */
}

Come vedi, una variabile si dichiara come una normale proprietà CSS. Il nome, però, deve cominciare con due trattini.

Per leggere una variabile devi usare la funzione var() e passarle il nome della variabile come parametro.

#title {
  color: var(--main-color);
}

E il tuo titolo prende il colore #00FF00.

Dichiarare una variabile CSS locale

Puoi anche creare variabili locali, accessibili solo all’elemento in cui sono dichiarate e ai suoi figli. Comodo quando sai che una variabile servirà soltanto in una o due parti precise dell’applicazione.

Per esempio potresti avere un box di avviso che usa un colore particolare, non usato da nessun’altra parte. In quel caso ha senso dichiararlo in locale.

.alert {
  --alert-color: #ff0000;
}

Ora la variabile è utilizzabile dai suoi figli:

.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}

Se provi a usare la variabile alert-color altrove nell’applicazione, per esempio nella barra di navigazione, semplicemente non funziona: il browser ignora quella riga di CSS.

Il responsive con le variabili CSS

Un grande vantaggio delle variabili CSS è che hanno accesso al DOM. Con LESS o SASS non è così, perché le loro variabili vengono compilate in CSS e solo dopo lette dal browser

In pratica vuol dire che puoi, per esempio, cambiare le variabili in base alla larghezza dello schermo:

:root {
  --main-size: 16px ;
}
@media all and (max-width: 600px) {
  :root {
    --main-size : 12px ;
  }
}

Con queste quattro righe hai aggiornato la dimensione del testo principale in tutta l’applicazione sugli schermi piccoli. Niente male, no?

Come leggere le variabili CSS da JavaScript

Un altro vantaggio del vivere nel DOM è che puoi leggere le variabili da JavaScript, e perfino aggiornarle, per esempio in base alle interazioni dell’utente.

var root = document.querySelector(':root') ;
var rootStyles = getComputedStyle(root) ;
var mainColor = rootStyles.getPropertyValue('--main-color') ;
console.log(mainColor); // #00FF00

Per aggiornare una variabile CSS basta chiamare il metodo setProperty sull’elemento in cui le variabili CSS sono state dichiarate, passando il nome della variabile come primo parametro e il nuovo valore come secondo.

root.style.setProperty('--main-color','#0000ff')

Compatibilità dei browser

Tutti i browser attuali supportano le variabili CSS, solo Internet Explorer, ormai abbandonato, le ignora.

···