Rendi dinamico il tuo CSS con le proprietà personalizzate CSS

Se stai scrivendo CSS da un po' di tempo, a un certo punto devi aver sentito il bisogno di variabili. Le proprietà personalizzate CSS sono in qualche modo simili all'implementazione delle variabili dei CSS. Tuttavia, se usati correttamente, possono essere molto più di semplici variabili.

Le proprietà personalizzate CSS ti consentono di:

• Assegna valori arbitrari a una proprietà con un nome a tua scelta
• Utilizzare la funzione var() per utilizzare questi valori in altre proprietà

Sebbene il supporto per le proprietà personalizzate CSS sia un percorso un po' difficile al momento e alcuni browser le supportino con flag che devono essere attivati ​​o impostati su true in anticipo, il loro supporto dovrebbe aumentare notevolmente andando avanti, quindi è importante capire come usarli e sfruttarli. ¹

In questo articolo imparerai come utilizzare le proprietà personalizzate CSS per rendere i tuoi fogli di stile un po' più dinamici, rendendo forse obsoleto quel passaggio Sass/LESS aggiuntivo nella tua pipeline di risorse.

La variabile CSS originale e meno potente

Prima di iniziare a discutere delle proprietà personalizzate CSS, va notato che da molto tempo i CSS hanno una sorta di variabile, e questa è la parola chiave currentColor . Questa variabile usata raramente ma ampiamente supportata si riferisce al valore del colore corrente di un elemento. Può essere utilizzato su qualsiasi dichiarazione che accetti un valore di color e si adatta perfettamente.

Diamo un'occhiata a un esempio:

 .element { color: blue; border: 2px solid currentColor; /* Sets a solid, 2px wide, blue border to the element */ }

Oltre alla cascata, questo può anche produrre quanto segue:

 .element span { background: currentColor; /* Sets a blue background color for every span child of .element, unless a color property is declared in this same block */ } .element span.red { color: red; /* Sets a red background color for every span child of .element that has the class .red, since currentColor is applied to the background of every span child of .element no matter if they have the .red class or not */ }

Il problema principale con currentColor , a parte il fatto che non era nella specifica come variabile di per sé, è che accetta solo il valore della proprietà color, che in alcuni casi può rendere difficile il lavoro.

Variabili CSS a tutti gli effetti

Uno dei principali vantaggi dell'utilizzo dei pre/postprocessori CSS è che consentono di memorizzare i valori in una parola chiave e, se necessario, di averli nell'ambito di un determinato selettore.

Dopo essere stata a lungo richiesta dagli sviluppatori, è stata scritta una bozza per un'interpretazione delle variabili native per CSS. Queste sono formalmente denominate proprietà personalizzate CSS, ma a volte vengono anche chiamate variabili CSS.

La specifica corrente per le proprietà personalizzate CSS native copre tutti gli stessi comportamenti delle variabili pre/postprocessore. Ciò consente di memorizzare codici colore, dimensioni con tutte le unità note o solo numeri interi se necessario (ad esempio, quando è necessario utilizzare lo stesso divisore o moltiplicatore).

La sintassi per le proprietà personalizzate CSS è un po' strana rispetto ad altri linguaggi, ma ha molto senso se confronti la loro sintassi con altre funzionalità nello stesso ecosistema CSS:

 :root { --color-black: #2e2e2e; } .element { background: var(--color-black); }

Ora potresti pensare: "Che tipo di sintassi è quella!?"

Bene, Lea Verou spiega il motivo di questa sintassi "trattino-trattino" con assoluta semplicità, come dice nel suo fantastico discorso, Variabili CSS: var(–subtitle):

Funzionano esattamente allo stesso modo di qualsiasi altra proprietà CSS […]. Così tante persone mi chiedono perché non abbiamo usato un dollaro [segno] o qualcosa del genere e il motivo per cui non abbiamo usato un dollaro [segno] è che vogliamo che le persone siano in grado di utilizzare sia SASS, o variabili del preprocessore e Variabili CSS. Sono entrambe cose diverse, raggiungono obiettivi diversi, ci sono cose che puoi fare con le variabili CSS che non puoi assolutamente fare con SASS, e ci sono cose che puoi fare con le variabili SASS che non puoi fare con le variabili CSS, quindi vogliamo persone in grado di usarli entrambi nello stesso foglio di stile, quindi puoi immaginare la sintassi trattino-trattino come una proprietà del prefisso con un prefisso vuoto.

Possiamo recuperare il valore della proprietà personalizzata usando la funzione var() , che possiamo usare ovunque tranne che per selettori, nomi di proprietà o dichiarazioni di query multimediali.

Vale la pena notare che mentre le variabili pre/postprocessore vengono utilizzate solo in fase di compilazione, le variabili CSS possono essere utilizzate e aggiornate dinamicamente. Cosa significa questo? Significa che sono conservati nel foglio di stile CSS effettivo. Quindi l'idea che siano variabili rimarrà anche dopo la compilazione dei fogli di stile.

Per chiarire meglio, vorrei illustrare la situazione utilizzando alcuni esempi. Il seguente blocco di codice fa parte di un foglio di stile SASS:

 :root { $value: 30px; } @media screen and (min-width: 768px) { $value: 60px; } .corners { border-radius: $value; }

Questo frammento di dichiarazioni e regole SASS viene compilato in CSS come segue:

 .corners { border-radius: 30px; }

Puoi vedere che sia le proprietà all'interno di :root che la media query vengono perse dopo la compilazione, perché le variabili SASS non possono esistere all'interno di un file CSS (o, per essere più precisi, possono essere forzate a esistere in un file CSS, ma vengono ignorate poiché alcune delle loro sintassi non sono CSS non valide), quindi il valore della variabile non può essere aggiornato in seguito.

Consideriamo ora lo stesso caso, ma applicato utilizzando solo variabili CSS senza pre/postprocessore CSS applicato (cioè, senza alcuna trascrizione o compilazione in corso):

 :root { --value: 30px; } @media screen and (min-width: 768px) { --value: 60px; } .corners { border-radius: var(--value); }

Ovviamente, non cambia nulla poiché non abbiamo compilato/traspilato nulla e il valore della proprietà personalizzata può essere aggiornato dinamicamente. Quindi, ad esempio, se cambiamo il valore di --value usando qualcosa come JavaScript, il valore si aggiornerà in ogni istanza in cui viene chiamato usando la funzione var().

Le funzionalità delle proprietà personalizzate rendono questa funzionalità così potente che puoi persino eseguire operazioni come l'autoprefisso.

Lea Verou dà un esempio usando la proprietà clip-path . Iniziamo impostando il valore della proprietà che vogliamo anteporre a initial ma utilizziamo una proprietà personalizzata, quindi procediamo a impostare il valore di ciascuna proprietà con prefisso sul valore della proprietà personalizzata:

 * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

Dopodiché, non resta che modificare il valore della proprietà personalizzata all'interno di un selettore:

 header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); }

Se desideri saperne un po' di più, dai un'occhiata all'articolo completo di Lea sull'autoprefisso con le variabili CSS.

Proprietà personalizzate CSS a prova di proiettile

Come accennato, il supporto del browser per le proprietà personalizzate CSS è ancora in gran parte non standard. Quindi come si può superare questo?

È qui che entra in gioco PostCSS e il suo plug-in, postcss-css-variables.

Nel caso ti stia chiedendo cos'è PostCSS, controlla il mio articolo PostCSS: la nuova data di riproduzione di SASS e torna su questo dopo aver finito. Avrai quindi un'idea di base di cosa puoi fare con questo fantastico strumento e non ti sentirai disorientato durante la lettura del resto dell'articolo.

Con il postcss-css-variables e la sua opzione di preserve impostata su true, possiamo mantenere tutte le dichiarazioni della funzione var() nell'output e avere il valore calcolato come dichiarazione di fallback. Mantiene anche le dichiarazioni --var calcolate. Tieni presente che, utilizzando questo plug-in PostCSS, le proprietà personalizzate possono essere aggiornate dinamicamente dopo il processo di traspirazione, ma i valori di fallback rimarranno gli stessi a meno che non siano specificamente mirati ed esplicitamente modificati individualmente.

Se stai cercando un modo senza pre/postprocessore per utilizzare le variabili CSS, puoi sempre controllare manualmente il supporto corrente con la regola CSS @support e applicare un appropriato fallback quando il supporto è irregolare o inesistente. Per esempio:

 :root { --color-blue: #1e90ff; /* hex value for dodgerblue color */ } .element { background: var(--color-blue); } @supports (not(--value: 0)) { /* CSS variables not supported */ .element { background: dodgerblue; } }

Modifica del valore di una proprietà personalizzata utilizzando JavaScript

Ho menzionato in tutto questo articolo che le variabili possono essere aggiornate usando JavaScript, quindi entriamo in quello.

Supponiamo che tu abbia un tema chiaro e desideri cambiarlo in un tema scuro, supponendo che tu abbia alcuni CSS come il seguente:

 :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); }

Puoi aggiornare le proprietà personalizzate --text-color e --background-color procedendo come segue:

 var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black');

Casi d'uso interessanti

Negli anni di sviluppo e discussione sulle specifiche delle CSS Custom Properties, sono emersi alcuni casi d'uso interessanti. Ecco alcuni esempi:

Temi: l'utilizzo di una serie di temi per un sito è piuttosto semplice quando si implementano le variabili CSS. Vuoi una variazione chiara o scura del tuo stile attuale? Basta modificare il valore di alcune proprietà personalizzate utilizzando JavaScript e il gioco è fatto.

Ottimizzazioni della spaziatura: è necessario ottimizzare la spaziatura di un sito, ad esempio una grondaia tra le colonne? Modifica il valore di una singola variabile CSS e osserva questa modifica riflessa a livello di sito.

Funzioni calc() completamente dinamiche: ora puoi avere funzioni calc() completamente dinamiche utilizzando proprietà personalizzate all'interno di queste funzioni, eliminando la necessità di eseguire calcoli complicati o effimeri all'interno di JavaScript e quindi aggiornare questi valori manualmente su ciascuna istanza.

Dai nuova vita ai tuoi file CSS

Le proprietà personalizzate CSS sono un modo potente e innovativo per dare più vita ai tuoi fogli di stile, introducendo per la prima volta valori completamente dinamici nei CSS.

La specifica è attualmente sotto lo stato di Candidate Recommendation, il che significa che la standardizzazione è dietro l'angolo, un buon motivo per approfondire questa funzionalità e trarne il massimo.