whatsapp   

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

Ci dispiace ricevere questa notizia. Aiutaci a migliorare! Cosa non va nell'articolo?

message
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
Come fare redirect in WordPress senza plugin
Scopri
Come recuperare utenti WordPress e dati senza plugin
Scopri
come creare tipi di post personalizzati in wordpress
Scopri
Come creare template articoli personalizzato WordPress
Scopri
somma di elementi di un array in php con array_sum()
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.

message
perm_identity
alternate_email

Inviato

keyboard_arrow_up