Ci sono interessanti novità in campo CSS. Se ne parla soprattutto all’estero e un po’ meno in Italia, ma le CSS Custom Properties rappresentano una vera e propria svolta in grado di semplificare e rendere al tempo stesso più precisa la realizzazione dello stile di un sito web. Ecco cosa approfondiremo in questo articolo:
- Cosa sono le CSS Custom Properties
- Come funzionano le CSS Custom Properties
- Esempi con le CSS Custom Properties
- Compatibilità con i vari browser
Introduzione alle CSS Custom Properties
Le CSS Custom Properties consentono l’uso delle variabili nel foglio di stile attraverso la variabile var(). Le variabili contengono dei valori specifici (ad esempio font-family; color…) da riutilizzare nel corpo del documento. Vengono create dall’autore del sito web in base alle esigenze del caso.
Per apprezzare l’uso delle variabili nel CSS basta pensare a quante volte si dovrebbe scrivere il font-size o il color di un testo in un sito web molto articolato e con molte pagine. Per non parlare delle eventuali modifiche da applicare in corso d’opera. Con le CSS Custom Properties basta una singola modifica all’inizio per vedere poi il resto del codice adeguarsi di conseguenza. Semplicemente fantastico.
Ma cosa rende le CSS Custom Properties diverse dai preprocessori come SASS e LESS?
Per far funzionare i preprocessori bisogna prima di tutto compilare i fogli di stile. Dal momento che queste “variabili” sono statiche non possono essere aggiornate dinamicamente. Le variabili delle CSS Custom Properties invece ci permettono di modificarle in tempo reale, in quanto dispongono del vero carattere di dinamicità. Questo significa che se modifichiamo la variabile, il browser riconosce e applica immediatamente la modifica. Possiamo inoltre sfruttare il codice in CSS standard come ereditarietà e cascata, cosa che non possiamo fare con le variabili dei preprocessori.
Con le CSS Custom Properties possiamo fare un ulteriore salto in avanti. Scopriamo la vera rivoluzione di questo potente strumento, grazie alle variabili dinamiche.
Il tratto distintivo delle CSS Custom Properties è la dinamicità delle variabili var(), a differenza di Sass e Less che utilizzano variabili statiche. Se ne cambiamo una con le CSS Custom Properties, vedremo il resto del foglio di stile adattarsi automaticamente alle modifiche di quella variabile. Questo ci risparmia di fare tutti i copia incolla indispensabili per far funzionare il codice. Una vera rivoluzione, soprattutto per i siti web più complessi che hanno bisogno di centinaia di righe di codice sul foglio di stile.
Mettiamo mano al codice con le CSS Custom Properties
Ora che abbiamo visto la teoria e tutti i vantaggi introdotti dalle CSS Custom Properties possiamo finalmente iniziare con la pratica, partiamo dalle basi:
Come si dichiara una variabile:
–main-bg-color: blue;
}
Come si applica una variabile
background-color: var(–main-bg-color);
}
Quindi le CSS Custom Properties sono la soluzione ideale per i siti più complessi?
A volte, dipende. O meglio, vorremmo tanto rispondere di sì, ma come molti di voi sapranno già, è obbligatorio valutare anche la compatibilità con i vari browser
Iniziamo questo mesto paragrafo in onore degli highlander dei browser ancora attivi, ormai sorpassati dagli scattanti e performanti Chrome, Edge, Firefox, Opera e Safari. Internet Explorer non è compatibile. Neanche Opera Mini. Avanti su, era prevedibile.
Compatibilità dei browser con le Custom Properties
Per quanto riguarda Chrome dalla versione 48, è necessario prima andare su chrome://flags/ per abilitare le “Experimental Web Platform features”
Firefox non dà problemi a partire dalla versione 31, però bisogna abilitare prima le “layout.css.variables” impostando il valore “True” sulle preferenze da qui -> about:config. Prima vi apparirà un messaggio di avviso in merito ai rischi, ma voi sapete quello che state facendo e vi limiterete a cambiare questa impostazione senza far esplodere il pc.
Ora che siete pronti per sperimentare, avete dubbi, domande? Noi siamo qui, scriveteci!
