Come usare le variabili in CSS: Le variabili, nella programmazione sono degli spazi di memoria nei quali vengono immagazzinati dati e informazioni.
Anche in CSS (anche se non è un linguaggio di programmazione) è possibile utilizzare le variabili, alle quali possiamo assegnare qualsiasi valore riconosciuto dal CSS e richiamarlo per assegnarlo agli attributi all’interno del foglio di stile.
Browser che supportano le variabili
Iniziamo con il dire che le variabili non sono supportate dai browser molto datati, mentre tutti i browser più recenti le supportano.
Questo non è un problema perchè i browser datati ormai difficilmente vengono ancora utilizzati, questa è la versione minima di ogni browser che è in grado di leggere le variabili in CSS:
- Chrome 49
- Firefox 31
- Internet Explorer: Non supporta le variabili CSS
- Edge 15
- Safari 9.1
- Opera 36
Considerando che attualmente Chrome è alla versione 79 e Firefox alla 72 possiamo renderci conto che praticamente quasi sicuramente le variabili saranno supportate dai browser degli utenti che visitano il nostro sito.
Unica eccezione è Internet Explorer che purtroppo invece non supporta le variabili in CSS, quindi in questo caso non verranno applicate le informazioni in esse contenute.
Di conseguenza per gli utenti che utilizzano Internet Explorer un sito web che fa largo uso di variabili in CSS potrebbe non essere facilmente navigabile.
Come usare le variabili in CSS
Fatta la premessa relativa ai browser, andiamo a vedere nella pratica come dichiarare e come poi richiamare le variabili.
Come dichiarare le variabili in CSS
Possiamo dichiarare le variabili all’interno di 2 contenitori, il primo è il body, ma sconsiglio di farlo perchè potrebbe contenere anche altri attributi relativi alla pagina e le variabili si perderebbero tra gli attributi.
Il metodo migliore per dichiararle è all’interno del campo :root.
I nomi delle variabili devono iniziare sempre con un doppio trattino e sono case sensitive.
Questo significa che –nome-variabile e –Nome-Variabile sono due variabili diverse.
:root {
--colore-principale: #000000;
--colore-secondario: red;
--dimensione-font-predefinita: 12px;
}Personalmente consiglio di utilizzare sempre nomi minuscoli e separare le parole con un trattino, in modo da seguire la nomenclatura standard del CSS.
Come richiamare una variabile in CSS
Ora che abbiamo dichiarato tutte le nostre variabili non ci resta che richiamarle dove ne abbiamo bisogno.
Per richiamare una variabile è sufficiente scrivere var(nomedellavariabile).
.classe_div{
background-color: var(--colore-principale);
color: var(--colore-secondario);
font-size: var(--dimensione-font-predefinita);
}In questo modo possiamo richiamare le variabili all’interno di classi, id o elementi tutte le volte che vogliamo.
Inoltre sarà sufficiente cambiare il valore della variabile per aggiornare automaticamente l’aspetto ovunque essa è stata utilizzata.
Sicuramente questo rende più comoda la scrittura del CSS, riduce al minimo gli errori e permette di aggiornare più rapidamente le pagine.
È inoltre possibile assegnare un valore predefinito alle variabili richiamate, che verrà utilizzato nel caso in cui quello assegnato in fase di dichiarazione non dovesse essere valido, o nel caso in cui il nome della variabile non dovesse essere trovato.
Per richiamare una variabile assegnandole un valore predefinito la sintassi è: var(nomedellavariabile, valore predefinito).
.classe_div{
background-color: var(--colore-principale, black);
color: var(--colore-secondario, red);
font-size: var(--dimensione-font-predefinita, 12px);
}
Rispondi