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, specializzato 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 modello 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 prova */ #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 prova:
: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.