Sabato
19
Marzo 2022
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.
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.
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.
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à).
Le variabili CSS sono case-sensitive, a differenza dei selettori. Nell’esempio vediamo dichiarate due diverse variabili.
--color: green;
--COLOR: green;
Scrivi un commento