Guida per principianti alle variabili CSS (aka Proprietà personalizzate CSS)

Sommario:

• Variabili CSS nei preprocessori #
• Variabili (proprietà personalizzate) nel CSS nativo #
• Perché "Proprietà personalizzate"? #
• Dove sono definite le variabili CSS? #
• Note tecniche sulle variabili CSS #
• Comprendere la funzione var() #
• Utilizzo delle variabili CSS con calc() #
• Trucchi con variabili CSS #

Variabili CSS nei preprocessori

I preprocessori CSS utilizzano le variabili CSS da oltre 10 anni. Non entrerò nei dettagli su queste opzioni qui, ma penso che sia utile sapere come ciascuna delle popolari librerie di preprocessori utilizza le variabili.

In Sass (o SCSS), dichiari le variabili come segue:

Notare il simbolo del dollaro ($). La prima riga è la dichiarazione della variabile e il suo valore. I due blocchi che seguono sono esempi delle variabili utilizzate più avanti nel foglio di stile.

Le variabili in Less.js usano il simbolo @ :

E in Stylus le variabili hanno questo aspetto:

Puoi consultare le singole sezioni della documentazione per ciascuno dei preprocessori mostrati sopra se vuoi approfondire le variabili che utilizzano queste tecnologie di terze parti.

Variabili (proprietà personalizzate) nei CSS nativi

Questo ci porta alle variabili CSS, o proprietà personalizzate, come sono definite nelle specifiche CSS. Per dichiarare una variabile in CSS semplice, metti due trattini davanti al nome personalizzato che scegli per la variabile o proprietà, quindi usa la funzione var() per posizionare quel valore dove desideri:

In questo esempio, ho definito due variabili CSS: --main e --accent . Ho quindi utilizzato ciascuna variabile CSS su due elementi diversi, dimostrando la flessibilità che offrono.

Come con le variabili in qualsiasi linguaggio di programmazione, ciò consente di dichiarare una variabile in un unico punto. Se in seguito desideri modificare quel valore ovunque nel tuo foglio di stile, si tratta semplicemente di modificare la dichiarazione originale e si applicherà a tutti i punti in cui usi la variabile.

Perché "Proprietà personalizzate"?

Nella conversazione quotidiana, gli sviluppatori spesso si riferiscono a questa funzionalità come "variabili CSS", in linea con il modo in cui preprocessori e linguaggi di programmazione si riferiscono alla stessa funzionalità. Ma da un punto di vista strettamente tecnico, queste non sono realmente "variabili" ma piuttosto sono proprietà personalizzate .

Hanno la stessa sintassi di qualsiasi proprietà predefinita nei CSS, ad eccezione dei due trattini che appaiono davanti al nome della proprietà. I due trattini consentono agli autori CSS di utilizzare qualsiasi identificatore tratteggiato valido senza timore di conflitti con le normali proprietà CSS.

Le specifiche spiegano che due trattini da soli non sono validi (apparentemente riservati per un uso futuro) e CSS non darà mai significato a nessun identificatore tratteggiato valido oltre al suo utilizzo come proprietà personalizzata definita dall'autore.

A differenza delle normali proprietà CSS, le proprietà personalizzate fanno distinzione tra maiuscole e minuscole. Ciò significa --main-color non è lo stesso di --Main-Color . I caratteri validi da includere nel nome della proprietà personalizzata sono lettere, numeri, trattini bassi e trattini.

Dove sono definite le variabili CSS?

Come puoi vedere nell'esempio che ho fornito sopra, vedrai spesso proprietà personalizzate CSS definite direttamente sull'elemento radice di un documento HTML o DOM shadow. Il selettore della pseudo-classe :root esegue questa operazione.

Ma le variabili CSS non si limitano a essere definite solo sull'elemento radice ed è spesso utile definirle altrove. Il selettore :root viene comunemente scelto perché punta sempre all'elemento più in alto nell'albero DOM (che sia il documento completo o il DOM shadow).

Nella maggior parte dei casi, otterresti lo stesso risultato definendo proprietà personalizzate sull'elemento html (che è l'elemento radice nei documenti HTML) o anche sull'elemento body . L'uso di :root consente al codice di essere più a prova di futuro (ad esempio se le specifiche un giorno aggiungono un nuovo elemento come root, il CSS rimarrebbe lo stesso) e suppongo che consenta anche di applicare un foglio di stile a un diverso tipo di documento che ha un elemento radice diverso.

Ad esempio, il codice seguente limiterebbe le tue proprietà personalizzate per l'uso solo nell'elemento .sidebar :

A scopo dimostrativo, vedrai spesso variabili definite su :root , ma puoi usarle ovunque sia pratico. In effetti, molti sviluppatori consigliano di impostarli più in basso nell'albero DOM per moduli più piccoli durante lo sviluppo iniziale, quindi di salire verso :root mentre crei valori di portata più ampia.

Note tecniche sulle variabili CSS

Oltre ad essere applicabili a qualsiasi elemento, le variabili CSS sono abbastanza flessibili e facili da gestire.

Ecco alcune cose degne di nota:

• Vengono risolti con l'ereditarietà CSS regolare e le regole a cascata
• Puoi usarli nelle query multimediali e in altre regole condizionali
• Puoi definirli nell'attributo di style di un elemento
• Possono essere letti o impostati utilizzando le funzionalità del modello a oggetti CSS.

È anche degno di nota il fatto che puoi essenzialmente nidificare le variabili CSS. Nota il seguente esempio:

Nota che ho definito una variabile --main-color , quindi sto usando lo stesso nome di variabile come valore per la seguente variabile CSS.

Puoi anche utilizzare la parola chiave !important in un valore di variabile CSS, ma questo applica solo l'"importanza" alla variabile stessa in relazione ad altre definizioni di variabile e non al valore che viene utilizzato su uno o più elementi nel documento. Se questo è fonte di confusione, ecco un esempio:

Nell'esempio sopra, il colore di sfondo sarebbe "azzurro", anche se l'arancione appare più avanti nelle definizioni delle variabili. Ma il valore di sfondo stesso sull'elemento body non avrebbe alcuna importanza.

Le variabili CSS possono anche contenere valori di parole chiave a livello CSS come initial , inherit e unset , ma la proprietà all non influisce sulle variabili CSS (cioè non vengono reimpostate).

Comprendere la funzione var()

Hai già visto la funzione var() usata in alcuni esempi tipici in questo tutorial sulle variabili CSS. Ma c'è di più in var() rispetto a quello che ho trattato finora.

Innanzitutto, la funzione var() è valida solo in un valore; un nome di proprietà o un selettore non possono utilizzare una variabile CSS. Inoltre, un valore di query multimediale non può utilizzare una variabile CSS (ad es @media (max-width: var(--my-var)) non è valido).

La funzione var() accetta due argomenti:

• Il nome della proprietà personalizzata da includere
• Un valore di riserva nel caso in cui la proprietà personalizzata non sia valida

Ecco un esempio in cui il secondo argomento ha effetto:

Si noti che nel codice sopra ho scritto il nome della variabile iniziale usando la parola britannica o canadese "color", ma quando ho usato la variabile ho incorporato l'ortografia americana "color". Ciò rende la variabile tecnicamente non valida e quindi lo sfondo grigio semplice ( #ccc ) ha effetto.

Si noti inoltre che un valore di fallback può contenere le proprie virgole. Quindi, ad esempio, se il tuo fallback è uno stack di caratteri, questo sarebbe un modo valido per definirlo:

Si noti ancora una volta che la mia variabile ha un difetto, dichiarando un --main-type sconosciuto invece di --main-font . Questo attiva il valore di fallback, che è uno stack di caratteri alternativo. Pertanto, tutto ciò che segue la prima virgola (anche includendo qualsiasi altra virgola) è il valore di fallback.

Utilizzo delle variabili CSS per i parziali

Quando si definisce una variabile CSS, il valore che contiene non deve essere di per sé un valore CSS valido; può essere un valore parziale che può essere utilizzato come parte di un valore completo.

Ad esempio, puoi suddividere una pila di caratteri:

In questo caso, ciascuno dei valori delle variabili funziona da solo, ma dimostra il punto. Proviamo un esempio più artificioso usando la notazione del colore rgba() :

Puoi vedere quanto potrebbe essere utile, permettendoti essenzialmente di "costruire" valori in modo dinamico.

Utilizzo delle variabili CSS con calc()

Uno dei modi utili per incorporare le variabili CSS nei tuoi progetti è in combinazione con la funzione calc() . Come forse saprai, calc() ti consente di eseguire calcoli all'interno di un valore. Quindi puoi fare qualcosa del genere:

Le proprietà personalizzate CSS ti consentono di portare calc() al livello successivo, ad esempio con dimensioni predefinite. Ahmad Shadeed ha descritto qualcosa di simile ed ecco un esempio:

Con questa impostazione, posso utilizzare i set di regole .module e .module-* all'interno delle query multimediali, consentendomi di mostrare quegli stili in modo condizionale per dimensioni specifiche del viewport o altre funzionalità multimediali. I moduli piccolo/medio/grande avrebbero le stesse classi del modulo principale ma solo la dimensione del modulo viene sovrascritta secondo necessità. Nell'esempio sopra, il valore iniziale 240 per la dimensione agisce come una sorta di valore predefinito, ma potrei anche passare 240px come secondo argomento in var() per funzionare come fallback.

Trucchi con le variabili CSS

Diversi sviluppatori hanno condiviso suggerimenti e trucchi utilizzando le variabili CSS nel corso degli anni. Non approfondirò quelli in dettaglio qui poiché questo è principalmente un tutorial per principianti, ma ecco una rapida carrellata di alcuni:

• Come accennato in precedenza, puoi utilizzare le variabili CSS negli stili in linea, come nel caso delle caselle delle proporzioni.
• Uno spazio è un valore valido per una variabile CSS, che ti permette di fare un trucco on/off (ad esempio per qualcosa come la modalità oscura), di cui puoi leggere nel post di Lea.
• Non puoi scrivere stili al passaggio del mouse negli stili inline, ma puoi aggirare il problema usando le variabili CSS.
• Le variabili CSS aiutano a creare più facilmente SVG multicolori, come descritto qui.
• Puoi costruire sistemi e temi di progettazione pratici e manutenibili con le variabili CSS, spiegate in dettaglio in questo post
• Puoi utilizzare le variabili CSS per creare griglie più efficienti e gestibili utilizzando le funzionalità di layout griglia, come descritto da Michelle Barker.

Conclusione

Le variabili CSS, o proprietà personalizzate CSS, sono già pronte per l'uso con oltre il 90% dei browser in uso a livello globale che supportano questa pratica funzionalità. Spero che questa discussione sulle basi e sulla sintassi ti incoraggi a considerare le variabili CSS nei tuoi progetti più recenti, se non l'hai già fatto.

Se il tuo uso delle variabili CSS è stato limitato ad alcuni colori del tema globale, forse questo tutorial ti ispirerà a farne un uso maggiore e possibilmente a inventare alcuni tuoi trucchi.

Ora che hai finito con le variabili CSS, dai un'occhiata ad alcune delle nostre altre guide:

• Disposizione della griglia CSS
• Introduzione a Parcel.js
• Tutorial CSS flexbox
• Pacchetto web per principianti
• Tutorial sulle micro-interazioni per sviluppatori principianti

In caso di domande su questo tutorial sulle variabili CSS, non esitare a inviarle nei commenti qui sotto.

Layout e presentazione di Chris Fitzgerald e Karol K.