whatsapp
keyboard_arrow_down Contatti

Sabato

19

Marzo 2022

Variabili in CSS come usarle nei tuoi fogli di stile

Come usare le variabili in CSS

  1. blog Come usare le variabili in CSS
event_available
schedule

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;

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come inviare dati dei form con Ajax serialize() a php
Scopri
Come usare le chiavi API Google
Scopri
Come unire file Javascript e CSS in WordPress
Scopri

Contattami

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up