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;
check_circle

Leggi anche

Come creare sottomenu backend WordPress con add_submenu_page()
Scopri di più
Come creare pagina di amministrazione backend WordPress
Scopri di più
Cos'è il marketing mix
Scopri di più
Perché analizzare i competitor
Scopri di più
Come creare controlli personalizzati per Wp customizer
Scopri di più
Come inviare dati dei form con Ajax serialize() a php
Scopri di più
Elenco icone Google in un array in codice php
Scopri di più
Come usare le chiavi API Google
Scopri di più

Contattaci!

Preventivo sempre gratuito

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.

message
perm_identity
alternate_email

keyboard_arrow_up