Skip to content

Variabili CSS, come e quando usarle

Scritto da

Simone

Le variabili CSS, da non confondere con le variabili dei pre processor come SASS o LESS, sono in giro da parecchio ma solo negli ultimi anni si è iniziato a vedere qualche utilizzo nel mondo reale grazie anche al migliorato supporto da parte dei vari browser, tranne come al solito Internet Explorer. 

CSS Variables (Custom Properties)

Permits the declaration and usage of cascading variables in stylesheets.

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 49
  • 31
  • No
  • 36
  • 9.1

Mobile / Tablet

  • 9.3
  • 76
  • No
  • 76
  • 68

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Cosa sono esattamente le variabili CSS?

Le variabili CSS ci permettono di specificare un valore e ripeterlo più volte all’interno del nostro foglio di stile, un esempio?

:root {
  --colore-principale: #333;
  --colore-titoli: #000;
}

body {
  color: var(--colore-principale);
}

h1 {
  color: var(--colore-titoli);
}

h2 {
  color: var(--colore-titoli);
}

Questo è un semplice esempio con i colori, ma potete tranquillamente applicare lo stesso approccio anche per le spaziature, creando di fatto una specie di indice che vi risparmierà tanto tempo di ricerca e sostituzione qualora aveste la necessità di cambiare un valore in applicato in più punti.

A questo punto starete pensando, beh ma una sostituzione in batch con un editor di testo come Sublime Text o Visual Studio Code si fa in pochi secondi, dov’è il gran vantaggio delle variabili?

Pensate per un attimo di dove alterare dei parametri a seconda di una classe, come per esempio il cambio della skin o il cambio delle spaziature ad una determinata media query.

:root {
  --colore-principale: #333;
  --colore-sfondo: #fff;
  --gutter: 30px;
}

@media screen and (max-width:768px) {
  :root {
    --colore-principale: #fff;
    --colore-sfondo: #111;
    --gutter: 15px;
  }
}

body {
  color: var(--colore-principale);
  background-color: var(--colore-sfondo);
  padding: 0 var(--gutter);
}

Grids e le variabili

Quando abbiamo iniziato a sviluppare il concept del nostro plugin Grids ci siamo chiesti come fare per ottimizzare il più possibile il codice ed evitare che Javascript si facesse carico di stampare del CSS inline ad ogni cambio di proprietà dai controlli alla preview nel block editor aka Gutenberg. Abbiamo deciso quindi di sperimentare un approccio basato interamente sulle variabili.

Le variabili possono essere definite globalmente come abbiamo visto nell’esempio precedente o all’interno di un elemento, nel nostro caso il contenitore di markup della sezione:

.grids-areas-wrapper {    
    --section-columns: 1fr 1fr 1fr 1fr;
    --section-rows: auto;
    --section-gutter: 0px;
    --section-background-repeat: no-repeat;
    --section-background-size: auto;
    --section-background-attachment: scroll;
    --section-background-position-x: 50%;
    --section-background-position-y: 50%;
}

In questo modo siamo in grado cambiare una variabile e lasciare che sia il browser ad applicare tramite CSS il cambiamento al nostro elemento.

Compatibilità nel mondo reale e considerazioni

Bene, vi ho convinto a sperimentare con le variabili ma fermi tutti, dovete assolutamente supportare IE nel vostro progetto!

La buona notizia è che potete utilizzare il css-vars-ponyfill realizzato da John Hildenbiddle, utilizzato peraltro in Grids, ma la cattiva notizia è che non supporta le variabili nelle media queries, cosa purtroppo molto limitante dal punto di vista creativo.

E voi state già utilizzando le variabili CSS nei vostri progetti?

p.s.

Questo sito utilizza le variabili per cambiare la skin al cambio giorno/notte 😉

Unisciti alla discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.