Sabato
19
Marzo 2022
Come usare le variabili in CSS
Stanco di usare solo fogli di stile statici? La soluzione sono le variabili in CSS, finalmente implementate intorno all’anno 2016.
Esse vengono chiamate anche Custom Properties o più precisamente Custom Properties for Cascading Variables Module.
La logica è molto semplice: come per qualsiasi altro linguaggio di programmazione, puoi impostare un valore appunto variabile e utilizzarlo in tutto il documento.
Vediamo come si usa:
:root {
--primary-color: valore;
}
La pseudo-classe :root identifica l’elemento radice del documento che, in HTML è sempre l’elemento <html>.
La sintassi è molto semplice perché basta specificare un nome a tua scelta e farlo precedere dal doppio trattino alto (–), senza spazi.
--nome-mia-variabile:Il valore è un semplice valore CSS che hai utilizzato milioni di volte:
--nome-mia-variabile: #ffffff;Assegnando variabili con :root è possibile utilizzarle per qualsiasi altro elemento nel codice della pagina web.
È possibile tuttavia assegnarle a qualsiasi altro selettore CSS, nello stesso modo.
Come usare le variabili in CSS
Ora che abbiamo dichiarato la variabile possiamo usarla per qualsiasi altro elemento della pagina, basta recuperarla con il selettore var().
:root {
--primary-color: #ffffff;
--alternative-color: #000000;
}
h1 {
color: var(--primary-color);
}
h2 {
color: var(--alternative-color);
}
Nell’esempio abbiamo definito due colori (bianco e nero) e assegnati alle variabili CSS –primary-color e –alternative-color per poi utilizzarle nei selettori h1 e h2 impostandone il colore.
Compatibilità con i browser
Oggi le variabili CSS sono compatibili al 100% con tutti i browser più utilizzati, compresi anche dispositivi mobile e tablet.
Per maggiori dettagli ti lascio il link diretto per verificarne la compatibilità in tempo reale.
Ereditarietà e specificità delle variabili CSS
Anche le variabili, come per qualsiasi altro elemento, rispettano i criteri di ereditarietà e specificità dei fogli di stile.
Vediamo un esempio in cui assegno due valori diversi per la stessa variabile:
:root {
--primary-color: black;
}
div.primary {
--primary-color: white;
color: var(--primary-color);
}
h1 {
color: var(--primary-color);
}
Nel codice html avremo una condizione di questo tipo
<h1>Colore nero</h1>
<div class="primary">
<h1>Colore bianco</h1>
<p>colore bianco</p>
</div>
Tutti gli elementi contenuti nel contenitore .primary ereditano la proprietà “color” (ereditarietà).
Tutti gli h1 interni a .primary saranno bianchi e tutti quelli esterni saranno neri (specificità).
Case Sensitive
Le variabili CSS sono case-sensitive, a differenza dei selettori. Nell’esempio vediamo dichiarate due diverse variabili.
--color: green;
--COLOR: green;
Scrivi un commento