Variabili CSS : parte 2

Supporto Quasi tutti i browser  supportano le variabili CSS . ...

Supporto
Quasi tutti i browser  supportano le variabili CSS . Per avere maggiori dettagli  – Supporto variabili CSS. Di seguito riportiamo  alcuni esempi che illustrano il tipico utilizzo delle variabili CSS.

Colori del tema
Le variabili nei CSS sono più utili quando abbiamo bisogno di applicare le stesse regole più volte per più elementi, ad es. i colori ripetuti in un tema. Invece di copiare e incollare ogni volta che vogliamo riutilizzare lo stesso colore, possiamo posizionarlo in una variabile e accedervi da lì.

Ora, se al nostro cliente non piace il colore blu che abbiamo scelto, possiamo modificare gli stili in un solo punto (la definizione della nostra variabile) per cambiare i colori dell’intero tema. Senza variabili dovremmo cercare e sostituire manualmente per ogni singola occorrenza.

:root{
 --prim-color: #B2D8DE;
 --acc-color: #FF4F00;
 }

html{
 background-color: var(--prim-color);
 }

h2{
 border-bottom: 4px solid var(--prim-color);
 }

button{
 color: var(--acc-color);
 border: 2px solid var(--acc-color);
 }

Kenji Agency : realizzazione siti web a Treviso