Ormai è realtà. Possiamo finalmente utilizzare le Proprietà Personalizzate o CSS Custom Properties!
Ma prima di tutto, iniziamo con un buon <h2>, seguito da un <p> riassuntivo.
Le CSS Custom Properties o Proprietà Personalizzate
Ovvero, come fare magie all’interno di un foglio di stile CSS.
Le Proprietà Personalizzate di CSS rappresentano un concetto “nuovo” nell’utilizzo dei fogli di stile. In breve, si tratta dell’uso di variabili accessibili all’interno del documento CSS e persino da Javascript, in modo NATIVO.
Perché “nuovo” tra virgolette? Probabilmente conosci già i CSS Preprocessors. Sono stati molto popolari, ma con l’arrivo delle Custom Properties e il progressivo supporto da parte dei browser, sono destinati a scomparire prima o poi. In fondo all’articolo trovi una tabella con il supporto tra browser, ma ti anticipo che già il 70% degli utenti utilizza un browser compatibile con le Proprietà Personalizzate.
CSS e Proprietà Personalizzate
Per capire il vantaggio rispetto a un foglio di stile CSS tradizionale, vediamo un esempio di foglio CSS senza Custom Properties e poi lo “tradurremo” usando le Custom Properties.
Supponiamo di voler impostare un body con un certo colore di sfondo, che poi useremo anche per il testo di un livello, e viceversa il colore del testo del body come sfondo della stessa.
Il livello .capa1 avrà un padding di 20px, la stessa misura che useremo come margin-top per .capa2.
body{
background-color:#1b1b1b;
color:#fff;
}
.capa1{
padding:20px;
color:#1b1b1b;
background-color:#fff;
}
.capa2{
margin-top:20px;
}
Ora riproponiamo lo stesso esempio, ma questa volta usando le Proprietà Personalizzate.
:root{
--color1:#1b1b1b;
--color2:#fff;
--mainSpacing:20px;
}
body{
background-color:var(--color1);
color:var(--color2);
}
.capa1{
padding:var(--mainSpacing);
color:var(--color1);
background-color:var(--color2);
}
.capa2{
margin-top:var(--mainSpacing);
}
Con :root dichiariamo le variabili, che saranno accessibili in tutto il CSS; usiamo il doppio trattino — per dichiarare una variabile e il suo valore. Per utilizzarle, basta richiamare var(–NOME_VARIABILE);.
Immagina ora quanto può essere utile in un foglio CSS con oltre 1000 righe di codice: modificando un solo valore, il cambiamento si rifletterà ovunque nel documento.
Un passo oltre
O anche due. Perché le CSS Custom Properties permettono di fare calcoli, operazioni condizionali e di impostare valori di default, nel caso una variabile non sia definita. Sembra Javascript, vero? E invece tutto questo avviene direttamente nel CSS.
Possiamo sommare, moltiplicare, confrontare valori diversi e applicare un valore o un altro a seconda della condizione.
.caja{
/*Se la variabile1 non è dichiarata, verrà applicato 10px*/
margin-top:var(--variable1, 10px);
/*Possiamo anche usare variabili per impostare un valore di default*/
padding-top:var(--variable1,var(--variable2));
/*Possiamo sommare, sottrarre, moltiplicare e dividere (*attenzione agli spazi in somma e sottrazione)*/
padding-top:calc(var(--variable1) + 10px);
height:calc(var(--variable1) - 5px);
line-height:calc(var(--variable1) * 2);
width:calc((var(--variable1) - 5px)/2);
}
Altri esempi:
:root{
/*Possiamo creare del testo da inserire in un :before successivamente*/
--texto:"Click per vedere";
}
.caja:before{
content:var(--text);
}
.caja2:before{
/*Possiamo aggiungere altro testo dopo la variabile dichiarata (ad esempio, un link a un progetto)*/
content:var(--text)' il nostro progetto completo';
}
.caja2:before{
/*Ora lo usiamo per un link a una notizia*/
content:var(--text)' la nostra notizia';
}
Esempio condizionale:
:root{
/*Accessibile anche tramite Javascript*/
--variableCond: if(x > 5) this.width = 10;
}
Supporto tra browser
Come puoi vedere, praticamente tutti i browser le supportano… Tranne Explorer! Che sorpresa, NON ME LO ASPETTAVO! Un pensiero nostalgico a quegli anni meravigliosi in cui dovevamo fare acrobazie per far funzionare tutto su Explorer 6.
Per fortuna, a differenza di allora, oggi meno del 4% degli utenti usa ancora Explorer. Niente di grave.
La percentuale di utenti che naviga con un browser compatibile con le Custom Properties è del 70,9%. Un dato molto alto.
