Ghid pentru începători pentru variabilele CSS (alias CSS Custom Properties)

Cuprins:

• Variabile CSS în preprocesoare #
• Variabile (proprietăți personalizate) în CSS nativ #
• De ce „Proprietăți personalizate”? #
• Unde sunt definite variabilele CSS? #
• Note tehnice despre variabilele CSS #
• Înțelegerea funcției var() #
• Utilizarea variabilelor CSS cu calc() #
• Trucuri cu variabile CSS #

Variabile CSS în preprocesoare

Preprocesoarele CSS folosesc variabile CSS de mai bine de 10 ani. Nu voi intra în detalii despre aceste opțiuni aici, dar cred că este util să știm cum fiecare dintre bibliotecile populare de preprocesor utilizează variabile.

În Sass (sau SCSS), declarați variabile după cum urmează:

Observați semnul dolarului ($). Prima linie este declarația variabilei și a valorii acesteia. Cele două blocuri care urmează sunt exemple ale variabilelor utilizate mai târziu în foaia de stil.

Variabilele din Less.js folosesc simbolul @ :

Și în Stylus variabilele arată astfel:

Puteți consulta secțiunile individuale de documentație pentru fiecare dintre preprocesoarele prezentate mai sus dacă doriți să căutați mai departe variabilele folosind aceste tehnologii terțe.

Variabile (Proprietăți personalizate) în CSS nativ

Acest lucru ne aduce la Variabile CSS, sau Proprietăți personalizate, așa cum sunt definite în specificația CSS. Pentru a declara o variabilă în CSS simplu, plasați două cratime în fața numelui personalizat pe care îl alegeți pentru variabilă sau proprietate, apoi utilizați funcția var() pentru a plasa acea valoare oriunde doriți:

În acest exemplu, am definit două variabile CSS: --main și --accent . Apoi am folosit fiecare variabilă CSS pe două elemente diferite, demonstrând flexibilitatea pe care o deschid.

Ca și în cazul variabilelor din orice limbaj de programare, acest lucru vă permite să declarați o variabilă într-un singur loc. Dacă mai târziu doriți să schimbați acea valoare peste tot în foaia de stil, este pur și simplu o chestiune de a schimba declarația originală și se va aplica tuturor locurilor în care utilizați variabila.

De ce „Proprietăți personalizate”?

În conversația de zi cu zi, dezvoltatorii se referă adesea la această caracteristică ca „variabile CSS”, în conformitate cu modul în care preprocesoarele și limbajele de programare se referă la aceeași caracteristică. Dar dintr-o perspectivă strict tehnică, acestea nu sunt cu adevărat „variabile”, ci mai degrabă sunt proprietăți personalizate .

Au aceeași sintaxă ca orice proprietate predefinită în CSS, cu excepția celor două liniuțe care apar în fața numelui proprietății. Cele două liniuțe permit autorilor CSS să utilizeze orice identificator întrerupt valid fără teama de a intra în conflict cu proprietățile CSS obișnuite.

Specificația explică faptul că doar două liniuțe sunt invalide (aparent rezervate pentru utilizare ulterioară) și CSS nu va da niciodată semnificație niciunui identificator liniuț valid dincolo de utilizarea sa ca proprietate personalizată definită de autor.

Spre deosebire de proprietățile CSS obișnuite, proprietățile personalizate țin cont de majuscule și minuscule. Aceasta înseamnă că --main-color nu este același lucru cu --Main-Color . Caracterele valide de inclus în numele proprietății personalizate sunt literele, cifrele, caracterele de subliniere și cratimele.

Unde sunt definite variabilele CSS?

După cum puteți vedea în exemplul pe care l-am oferit mai sus, veți vedea adesea proprietăți personalizate CSS definite direct pe elementul rădăcină al unui document HTML sau DOM umbră. Selectorul de pseudo-clasă :root realizează acest lucru.

Dar variabilele CSS nu se limitează la a fi definite doar pe elementul rădăcină și este adesea benefic să le definiți în altă parte. Selectorul :root este ales în mod obișnuit, deoarece acesta vizează întotdeauna elementul cel mai de sus din arborele DOM (fie că este vorba de documentul complet sau de DOM umbră).

În cele mai multe cazuri, veți obține același rezultat definind proprietăți personalizate pe elementul html (care este elementul rădăcină în documentele HTML) sau chiar pe elementul body . Folosirea :root permite codului să fie mai rezistent la viitor (de exemplu, dacă specificația într-o zi adaugă un nou element ca rădăcină, CSS-ul va rămâne același) și presupun că permite, de asemenea, ca o foaie de stil să se aplice unui alt tip de document care are un element rădăcină diferit.

De exemplu, următorul cod ar limita proprietățile dvs. personalizate pentru utilizare numai în elementul .sidebar :

În scopuri demonstrative, veți vedea adesea variabile definite pe :root , dar le puteți utiliza oriunde este practic. De fapt, mulți dezvoltatori recomandă să le setați mai jos în arborele DOM pentru modulele mai mici în timpul dezvoltării inițiale, apoi să vă îndreptați spre :root pe măsură ce creați valori care au un domeniu mai mare.

Note tehnice despre variabilele CSS

Pe lângă faptul că se pot aplica oricărui element, variabilele CSS sunt destul de flexibile și ușor de tratat.

Iată câteva lucruri care merită remarcate:

• Acestea sunt rezolvate cu moștenire CSS obișnuită și reguli în cascadă
• Le puteți folosi în interogări media și în alte reguli condiționate
• Le puteți defini într-un atribut de style al unui element
• Ele pot fi citite sau setate folosind caracteristicile modelului de obiecte CSS.

De asemenea, este de remarcat faptul că, în esență, puteți imbrica variabile CSS. Observați următorul exemplu:

Observați că am definit o variabilă --main-color , apoi folosesc același nume de variabilă ca valoare pentru următoarea variabilă CSS.

De asemenea, puteți utiliza cuvântul cheie !important într-o valoare a variabilei CSS, dar aceasta aplică doar „importanța” variabilei în sine în raport cu alte definiții ale variabilei și nu valorii care este folosită pe unul sau mai multe elemente din document. Dacă acest lucru este confuz, iată un exemplu:

În exemplul de mai sus, culoarea de fundal ar fi „albastru deschis”, chiar dacă portocaliul apare mai târziu în definițiile variabilelor. Dar valoarea de fundal în sine asupra elementului body nu ar avea nicio importanță.

Variabilele CSS pot conține, de asemenea, valori ale cuvintelor cheie la nivel CSS, cum ar fi initial , inherit și unset , dar proprietatea all nu afectează variabilele CSS (adică nu sunt resetate).

Înțelegerea funcției var() .

Ați văzut deja funcția var() folosită în unele exemple tipice din acest tutorial CSS Variables. Dar este mai mult la var() decât ceea ce am acoperit până acum.

În primul rând, funcția var() este validă numai într-o valoare; un nume de proprietate sau un selector nu poate folosi o variabilă CSS. De asemenea, o valoare de interogare media nu poate utiliza o variabilă CSS (de exemplu @media (max-width: var(--my-var)) este nevalidă).

Funcția var() ia două argumente:

• Numele proprietății personalizate de inclus
• O valoare alternativă în cazul în care proprietatea personalizată este nevalidă

Iată un exemplu în care al doilea argument are efect:

Observați că în codul de mai sus am scris numele inițial al variabilei folosind cuvântul britanic sau canadian „culoare”, dar când am folosit variabila am încorporat ortografia americană „culoare”. Acest lucru face ca variabila să fie invalidă din punct de vedere tehnic și astfel fundalul gri simplu ( #ccc ) are efect.

Rețineți, de asemenea, că o valoare de rezervă poate conține propriile virgule. Deci, de exemplu, dacă alternativa dvs. este o stivă de fonturi, aceasta ar fi o modalitate validă de a o defini:

Observați din nou variabila mea are un defect, declarând un necunoscut --main-type în loc de --main-font . Aceasta declanșează valoarea de rezervă, care este o stivă alternativă de fonturi. Astfel, totul după prima virgulă (chiar și orice alte virgule) este valoarea de rezervă.

Utilizarea variabilelor CSS pentru partiale

Când definiți o variabilă CSS, valoarea pe care o deține nu trebuie să fie o valoare CSS validă în sine; poate fi o valoare parțială care poate fi utilizată ca parte a unei valori complete.

De exemplu, puteți sparge o stivă de fonturi:

În acest caz, fiecare dintre valorile variabilei funcționează singură, dar demonstrează ideea. Să încercăm un exemplu mai artificial folosind notația de culoare rgba() :

Puteți vedea cât de util ar putea fi acest lucru, permițându-vă în esență să „construiți” valori în mod dinamic.

Utilizarea variabilelor CSS cu calc()

Una dintre modalitățile utile de a încorpora variabile CSS în proiectele dvs. este în combinație cu funcția calc() . După cum probabil știți, calc() vă permite să efectuați calcule în cadrul unei valori. Deci poți face ceva de genul:

Proprietățile personalizate CSS vă permit să duceți calc() la nivelul următor, de exemplu cu dimensiuni predefinite. Ahmad Shadeed a descris ceva similar și iată un exemplu:

Cu acest lucru în loc, pot folosi seturile de reguli .module și .module-* în interiorul interogărilor media, permițându-mi să arăt aceste stiluri în mod condiționat pentru anumite dimensiuni ale ferestrei de vizualizare sau alte caracteristici media. Modulele mici/medii/mari ar avea aceleași clase ca și modulul principal, dar numai dimensiunea modulului este suprascrisă după cum este necesar. În exemplul de mai sus, valoarea inițială de 240 pentru dimensiune acționează ca un fel de implicit, dar aș putea trece și 240px ca al doilea argument în var() pentru a funcționa ca alternativă.

Trucuri cu variabile CSS

Mai mulți dezvoltatori au împărtășit sfaturi și trucuri folosind variabile CSS de-a lungul anilor. Nu le voi extinde în detaliu aici, deoarece acesta este în principal un tutorial pentru începători, dar iată o scurtă descriere a unora:

• După cum am menționat mai devreme, puteți utiliza variabile CSS în stiluri inline, ca în cazul casetelor cu raport de aspect.
• Un caracter spațiu este o valoare validă pentru o variabilă CSS, care vă permite să faceți un truc on/off (de exemplu, pentru ceva de genul modului întunecat), despre care puteți citi în postarea Leei.
• Nu puteți scrie stiluri de hover în stiluri inline, dar puteți ocoli acest lucru folosind variabile CSS.
• Variabilele CSS ajută la crearea mai ușor de SVG-uri multicolore, așa cum este subliniat aici.
• Puteți construi sisteme și teme de design practice și ușor de întreținut cu variabile CSS, expuse în detaliu în această postare
• Puteți utiliza variabile CSS pentru a construi grile mai eficiente și mai ușor de întreținut folosind funcțiile Grid Layout, așa cum este descris de Michelle Barker.

Concluzie

Variabilele CSS, sau proprietățile personalizate CSS, sunt gata de utilizare astăzi, cu peste 90% din browserele utilizate la nivel global care acceptă această caracteristică la îndemână. Sper că această discuție despre elementele de bază și sintaxă vă va încuraja să luați în considerare variabilele CSS în cele mai noi proiecte, dacă nu ați făcut-o deja.

Dacă utilizarea variabilelor CSS a fost limitată la unele culori ale temei globale, poate acest tutorial vă va inspira să le folosiți mai mult și, eventual, să veniți cu unele trucuri proprii.

Acum că ați terminat cu variabilele CSS, consultați câteva dintre celelalte ghiduri ale noastre:

• Aspect grilă CSS
• Introducere în Parcel.js
• Tutorial CSS flexbox
• Webpack pentru începători
• Tutorial de micro-interacțiuni pentru dezvoltatori începători

În cazul în care aveți întrebări cu privire la acest tutorial CSS Variables, nu ezitați să le trimiteți în comentariile de mai jos.

Aspect și prezentare de Chris Fitzgerald și Karol K.