Le Custom Properties, più estesamente "CSS Custom Properties for Cascading Variables Module", ci permettono di introdurre variabili nelle dichiarazioni CSS. Come le Feature Queries (istruzioni condizionali nei CSS) si tratta di un costrutto che avvicina la sintassi dei fogli di stile a quella dei maggiori preprocessori.
Le Custom Properties funzionano in modo simile a qualsiasi altra variabile, esse infatti fungono da contenitori per le informazioni; queste ultime vengono attribuite alle variabili sfruttando il meccanismo dell'assegnazione, motivo per il quale la sintassi delle Custom Properties prevede di definire un nome da assegnare alla variabile e di attribuire ad essa un valore attraverso l'utilizzo dell'operatore "=", detto appunto operatore di assegnazione:
--nome-variabile: valore;Il nome della variabile, scelto arbitrariamente dallo sviluppatore, viene preceduto dalla doppia dash "--" e insieme ad essa costituisce il suo identificatore univoco che deve essere utilizzato per rappresentare una o più volte il valore assegnato. Un esempio particolarmente interessante riguarda l'utilizzo delle variabili per la rappresentazione dei dati relativi ai colori da applicare a diverse componenti di un progetto:
:root {
--main-color: #3B5998;
--accent-color: #4099FF;
}
/* ..per la parte restante del documento */
#blahblah h1 {
color: var(--main-color);
}Nel codice proposto vengono definite due Custom Properties, nell'ordine --main-color e --accent-color, ciascuna di esse associata ad un diverso colore che rappresenta l'informazione contenuta nella variabile:
--main-color: #3B5998;
--accent-color: #4099FF;La Custom Property --main-color è stata poi riutilizzata tramite la funzione var() per impostare il colore dei contenuti delimitati dall'elemento h1 per l'id #blahblah; questo significa che --main-color potrà essere impiegata tutte le volta che si desidera attribuire il colore #3B5998 ad un elemento, senza dover ripetere quest'ultimo.
E' poi interessante notare come le Custom Property supportino l'ereditarietà; a tal proposito si consideri il seguente esempio:
:root { --color: black; }
div { --color: grey; }
#alert { --color: magenta; }
* { color: var(--color); }e l'output da esso prodotto:
<p>Questo contenuto verrà colorato di nero per ereditarietà dall'elemento di root</p>
<div>Questo elemento sarà grigio come specificato per le div box.</div>
<div id='alert'>
Questo elemento sarà magenta come specificato per l'id #alert
<p>Quest'ultimo elemento sarà anch'esso magenta per ereditarietà.</p>
</div>Ciò consente di gestire le Custom Property nel caso in cui una di esse venga dichiarata più volte, la funzione var() consente infatti di sostituire il valore di una Custom Property con il valore di un'altra.
