email

Come usare le variabili in CSS

Ti trovi in:
  1. blog Come usare le variabili in CSS

Pubblicato il , aggiornato il 10 Novembre 2021

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.

code

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.

code

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.

code

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à).

code

Case Sensitive

Le variabili CSS sono case-sensitive, a differenza dei selettori. Nell’esempio vediamo dichiarate due diverse variabili.

--color: green;
--COLOR: green;

Contattaci!

Preventivo sempre gratuito

Fabio Fresia, fondatore e titolare di Eureka Web di Asti

perm_device_information366 - 400 9542       emailinfo@agenziawebeureka.it

perm_identity
alternate_email
phonelink_ring
message