Corsi on-line

Utilizzare currentColor per gestire i colori in CSS

Attualmente sono pochi i browser Web che supportano l’utilizzo delle variabili nelle regole di stile CSS, Firefox offre compatibilità a partire dalla versione 43, Chrome dalla release 48 dove però tale feature non è stata abilitata di default e Safari dalla 9.1 (9.3 nel caso della variante per iOS), questi costrutti non sono invece supportati su Microsoft Edge, Internet Explorer, Opera (anche Opera Mini) e Android browser. Abbiamo però currentColor, un elemento che svolge una funzione simile per la definizione dei colori.

css3Com’è noto, una variabile è in sostanza un spazio di memoria identificato da un nome e destinato a contenere un’informazione; currentColor non è esattamente una variabile ma, più propriamente, un valore. Quest’ultimo potrà essere utilizzato per indicare se si desidera adottare il medesimo valore associato a color per altre proprietà correlate a componenti colorabili, come per esempio quelle relative a background, bordi o box shadows.

Fortunatamente currentColor è supportato da tutti i browser più diffusi, sia su Desktop che su dispositivi mobili, persino Internet Explorer permette di ricorrere a questo costrutto a partire dalla versione 8, Opera introdusse la compatibilità con i valori associati ad esso a partire dal 2009, Firefox dalla release 3.5, Safari dalla 4 e Chrome dalla prima stabile distribuita da Mountain View.

Utilizzare currentColor è abbastanza semplice, una volta definito un colore per la proprietà color, questo potrà essere riutilizzato senza essere specificato all’interno dello stesso selettore. Nell’esempio seguente è stato associato il valore green a color, successivamente si è fatto ricorso a currentColor per definire il medesimo colore da associare alle proprietà border e box-shadow:

div {
  color: green;
  border: 2px dashed currentColor;
  box-shadow: 0 0 8px dashed currentColor;
}

Da notare come currentColor possa influenzare la definizione dei colori anche all’esterno di un selettore, è il caso del suo utilizzo con il tag body che, stabilendo delle caratteristiche valide per l’intero corpo di una pagina, permetterà il riutilizzo dei valori espressi anche per il resto delle componenti:

body { color: green; }
div { border: 2px dashed currentColor; }

currentColor potrebbe rivelarsi particolarmente utile nel caso di progetti complessi, come per esempio le animazioni. Per resettarne il valore basterà associarne uno nuovo alla proprietà color del selettore interessato.

Post correlati
I più letti del mese
Tematiche