Ecco le variabili CSS, i suoi limiti e gli utilizzi intelligenti

Lavorare nel web è veramente fantastico! I linguaggi di programmazione si sviluppano continuamente e amplificano le cose che possiamo creare. Oggi ti voglio parlare di un nuovo aspetto dei CSS che ritengo molto interessante: le variabili CSS.

So che hai già sentito dire che le variabili nei CSS sono state portate dai pre-processori come Sass, LESS o Stylus ma l’argomento di oggi è leggermente diverso perché, come scoprirai continuando a leggere, le variabili CSS (conosciute anche come Custom Properties) si comportano in maniera diversa da quelle offerte dai pre-processori.

Le variabili CSS sono valori che vivono all’interno del browser.

Questa è la principale differenza tra le variabili rese disponibili dai pre-processori e sapere che il valore di una variabile CSS può essere modificato direttamente all’interno del nostro codice è sicuramente un aspetto molto interessante e che ti inviterà a scoprire tutte gli altri effetti che puoi realizzare con questo nuovo modulo CSS.

Non sono le prime Custom Properties che hai usato

Partiamo con un concetto molto semplice, hai già usato delle variabili CSS.

Forse hanno una sintassi diversa da quella che scoprirai a breve, ma valori come initial, auto o inherit sono tutti definiti dal browser durante il disegno della pagina. Con variabili Sass invece si può soltanto modificare il valore nel nostro file .scss, il browser ottiene il valore inserito da questo pre-processore.

Oltre ai valori che vengono calcolati dal browser esiste una vera e propria variabile che possiamo definire all’interno dei CSS. Abbiamo già parlato di questa variabile quando ti ho presentato i miei trucchi CSS per il 2017, ma se non hai avuto ancora modo di leggere l’articolo, ecco la sintassi che ti permetterà di usare currentColor:

.container{ 
	color: green; 
} 

.container p{ 
	border-bottom: 3px solid currentColor; 
}

Come puoi notare, usare currentColor ci permette di collegarci al colore definito nell’elemento parente senza la necessità di conoscere il valore da impostare. Se vieni a controllare questo CodePen ti accorgerai che modificando la proprietà color per l’elemento .container andrai a modificare il colore del bordo impostato nel paragrafo.

Ovviamente poter far riferimento a una manciata di parole chiave che non possiamo neanche scegliere non significa poter lavorare con le variabili.

Poter usare questi elementi in un linguaggio di programmazione significa rendere il nostro codice molto più elastico e poter salvare valori come colori, stringhe, numeri, unità di misura… Praticamente possiamo dare un nome familiare, come colore-sfondo-testata, a tutti quei valori che usiamo più e più volte all’interno del nostro codice.

Dichiara e richiama il valore di una variabile CSS

La prima cosa che salta all’occhio quando si inizia a parlare di variabili CSS è la loro strana sintassi. Ecco qua sotto un esempio per aiutarti a capire che cosa intendo:

body{ 
  --color: #000; 
}

La sintassi che vedi utilizzata qua sopra serve a dichiarare una variabile CSS. Alla variabile di nome --color (e mi raccomando non color) viene assegnato il valore esadecimale che indica un bel nero pieno.

Se stai pensando: “Mamma mia che brutta sintassi.” o ti stai chiedendo perché mai vengono utilizzati due simboli - le motivazioni sono 2:

1. per prima cosa le variabili CSS possono essere usate con i pre-processori che  storicamente preferiscono il simbolo $
2. e poi anche perché il W3C ha deciso di creare questo vendor prefix senza inserire il vendor 🙂

Per richiamare il valore contenuto nella variabile non basta utilizzare il suo nome, ma dobbiamo anche utilizzare la funzione var() che è stata appositamente introdotta. Quindi per richiamare il valore contenuto in questa variabile e utilizzarlo per definire il colore di sfondo di un bottone dovremmo usare questa sintassi:

button{ 
  background-color: var( --color ); 
}

Diciamoci la verità, a prima vista sembra anche a te che usare le variabili CSS (soprattutto la loro sintassi) non sia altro che un metodo per complicare il nostro codice, immaginiamoci che oltretutto non ci sia compatbilità tra i browser!

Invece, a parte piccoli bug con Edge 15, come dimostra questa tabella di Can I use, al giorno d’oggi possiamo lavorare tranquillamente con le variabili CSS.

Allora perché dovresti rifiutarti di usare questo nuovo modulo?

Io ci ho riflettuto attentamente e non ho trovato alcun buon motivo per non utilizzare questo modulo CSS nel mio lavoro, soprattutto se studiamo con attenzione alcuni effetti che possiamo facilmente implementare.

[VIDEO] Usi interessanti e limiti delle variabili CSS

Abbiamo appena detto che la sintassi delle variabili CSS non è tra le più eccitanti o comode che si possono incontrare, quindi perché mai usarle?

Ebbene ci sono molti aspetti per i quali ti consiglio di iniziare a utilizzare questa nuova sintassi ma piuttosto che elencarli tutti, ho preferito registrare un video all’interno del quale ti spiego i vari aspetti.

Se non puoi guardare adesso il video non ti preoccupare, puoi leggere i punti principali in questa lista in basso. Allo stesso tempo ti consiglio di iscriverti al nostro canale YouTube per non perderti i nostri futuri video!

Usi interessanti delle variabili CSS

All’interno del video ho parlato dei seguenti aspetti:

• Le variabili CSS sono proprietà ereditate, se in un contenitore viene impostata una proprietà (come in questo Pen) anche il figlio potrebbe ereditare la proprietà con lo stesso valore impostato. Per risolvere questo problema si può risolvere dichiarando --nomevar: initial
• possiamo impostare un valore di fallback come secondo parametro var( --var, default )
• i valori di fallback possono essere concatenati richiamando altre variabili
• possibile dichiarare il valore di una variabile anche all’interno di un attributo style, in questo modo il suo valore può essere modificato dinamicamente via JavaScript
• un esempio su come usare @supports per usare le variabili soltanto se possibile
• posso creare dei componenti che sono più semplici da modificare usando le variabili
• comodi usi anche per quanto riguarda il responsive design, rendendolo più semplice.

Limiti delle variabili CSS

• non è possibile utilizzare il suo valore concatenandolo ad altre stringhe (in content è possibile ma si tratta di un’eccezione)
• la funzione url() ha un bug e se trova una parentesi tonda chiusa ) ritiene che il parametro passato sia terminato
• valori vuoti non sono validi --foo:;
• però se lascio uno spazio il suo valore è spazio --foo: ;
• inoltre le variabili CSS sono case sensitive --foo è diverso da --FOO (a differenza delle altre proprietà CSS)
• la presenza o meno del valore di una variabile o della sua decorazione ha degli effetti differenti. Come mostrato nell’immagine se il valore impostato non viene compreso dal browser questo imposterà il valore della proprietà allo stato iniziale, che per background è transparent

Conclusioni

In questo articolo abbiamo presentato le variabili CSS in tutta la loro bellezza e discusso anche i limiti di questa tecnologia. Dato il loro ampio supporto con tutti i browser moderni io ho già iniziato a implementarle e tu?

Per essere sicuro che tutto fili liscio mi sono limitato a inserire le Custom Properties nei miei progetti con l’ausilio di @supports ma non vedo l’ora che anche questa vecchia compatibilità venga messa da parte.

I CSS si stanno evolvendo molto velocemente e ci sono altri argomenti che voglio presentarti e approfondire all’interno dei nostri corsi, ma ho bisogno anche della tua partecipazione. Quali sono gli argomenti che ti interessano maggiormente quando si parla di FrontEnd? Che cosa ti attira dello sviluppo web?

Se non vuoi rispondere adesso, condividi l’articolo con amici e colleghi sono sicuro che molti di loro potranno beneficiare da questi contenuti proprio come hai fatto tu 😉