Faceți-vă CSS dinamic cu proprietăți personalizate CSS

Dacă ai scris CSS de ceva vreme, trebuie să fi simțit la un moment dat nevoia de variabile. Proprietățile personalizate CSS sunt oarecum ca implementarea proprie a variabilelor CSS. Cu toate acestea, atunci când sunt utilizate corespunzător, ele pot fi mult mai mult decât simple variabile.

Proprietățile personalizate CSS vă permit să:

• Atribuiți valori arbitrare unei proprietăți cu un nume la alegere
• Utilizați funcția var() pentru a utiliza aceste valori în alte proprietăți

Deși suportul pentru proprietățile personalizate CSS este o cale dificilă în acest moment, iar unele browsere le acceptă sub semnalizări care trebuie activate sau setate la adevărat în prealabil, suportul lor este de așteptat să crească dramatic în avans, așa că este important să înțelegem cum să le folosiți și să le folosiți. ¹

În acest articol, veți afla cum puteți utiliza proprietățile personalizate CSS pentru a vă face foile de stil puțin mai dinamice, poate făcând ca pasul suplimentar Sass/LESS din pipeline-ul dvs. de active să fie depășit.

Variabila CSS originală și mai puțin puternică

Înainte de a începe să discutăm despre proprietățile personalizate CSS, trebuie remarcat că de mult timp, CSS are un fel de variabilă și acesta este cuvântul cheie currentColor . Această variabilă rar folosită, dar acceptată pe scară largă, se referă la valoarea curentă a culorii unui element. Poate fi folosit pe orice declarație care acceptă o valoare de color și se cascadă perfect.

Să aruncăm o privire la un exemplu:

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

Pe lângă cascada, aceasta poate produce și următoarele:

 .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 */ }

Problema principală cu currentColor , în afară de faptul că nu a fost în specificație ca variabilă în sine, este că acceptă doar valoarea proprietății culoare, ceea ce poate face dificilă lucrul cu el în unele cazuri.

Variabile CSS cu drepturi depline

Unul dintre principalele avantaje ale utilizării pre/postprocesoarelor CSS este că acestea permit stocarea valorilor într-un cuvânt cheie și, dacă este necesar, să le ajute la un anumit selector.

După ce a fost solicitată mult timp de către dezvoltatori, a fost scrisă o schiță pentru o interpretare a variabilelor native pentru CSS. Acestea sunt denumite în mod oficial proprietăți personalizate CSS, dar uneori sunt denumite și variabile CSS.

Specificația actuală pentru proprietățile personalizate CSS native acoperă aceleași comportamente ca și variabilele pre/postprocesor. Acest lucru vă permite să stocați coduri de culoare, dimensiuni cu toate unitățile cunoscute sau doar numere întregi dacă este necesar (de exemplu, atunci când trebuie să utilizați același divizor sau multiplicator).

Sintaxa pentru proprietățile personalizate CSS este puțin ciudată în comparație cu alte limbi, dar are o mulțime de sens dacă le compari sintaxa cu alte caracteristici din același ecosistem CSS:

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

Acum, s-ar putea să vă gândiți: „Ce fel de sintaxă este asta!?”

Ei bine, Lea Verou explică motivul acestei sintaxe „liniuță-liniuță” cu o simplitate absolută, așa cum spune ea în discursul ei uimitor, Variabile CSS: var(–subtitle):

Ele funcționează exact la fel ca orice altă proprietate CSS […]. Atât de mulți oameni mă întreabă de ce nu am folosit un [semn] dolar sau ceva de genul ăsta și motivul pentru care nu am folosit un [semn] dolar este că dorim ca oamenii să poată folosi atât SASS, cât și variabilele preprocesorului și variabile CSS. Ambele sunt lucruri diferite, realizează obiective diferite, există lucruri pe care le poți face cu variabilele CSS pe care nu le poți face cu SASS și există lucruri pe care le poți face cu variabilele SASS pe care nu le poți face cu variabilele CSS, așa că vrem oamenii să le poată folosi pe ambele în aceeași foaie de stil, astfel încât să vă puteți imagina sintaxa liniuță-liniuță ca o proprietate de prefix cu un prefix gol.

Putem prelua valoarea proprietății personalizate folosind funcția var() , pe care o putem folosi peste tot, cu excepția selectoarelor, a numelor de proprietăți sau a declarațiilor de interogare media.

Este demn de remarcat faptul că, în timp ce variabilele pre/postprocesor sunt utilizate doar în timpul compilării, variabilele CSS pot fi utilizate și actualizate dinamic. Ce inseamna asta? Înseamnă că acestea sunt păstrate în foaia de stil CSS reală. Deci ideea că sunt variabile va rămâne chiar și după compilarea foilor de stil.

Pentru a fi mai clar, permiteți-mi să ilustrez situația folosind câteva exemple. Următorul bloc de cod face parte dintr-o foaie de stil SASS:

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

Acest fragment de declarații și reguli SASS este compilat în CSS după cum urmează:

 .corners { border-radius: 30px; }

Puteți vedea că atât proprietățile din :root , cât și media query se pierd după compilare, deoarece variabilele SASS nu pot exista în interiorul unui fișier CSS (sau, mai precis, pot fi forțate să existe într-un fișier CSS, dar sunt ignorate). deoarece o parte din sintaxa lor este CSS invalidă), astfel încât valoarea variabilei nu poate fi actualizată ulterior.

Acum să luăm în considerare același caz, dar aplicat folosind numai variabile CSS fără nici un pre/postprocesor CSS aplicat (adică, fără a fi efectuată nicio transpilare sau compilare):

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

Evident, nimic nu se schimbă din moment ce nu am compilat/transpilat nimic, iar valoarea proprietății personalizate poate fi actualizată dinamic. Deci, de exemplu, dacă schimbăm valoarea lui --value folosind ceva de genul JavaScript, valoarea se va actualiza în fiecare caz în care este apelată folosind funcția var().

Capacitățile proprietăților personalizate fac această caracteristică atât de puternică încât puteți chiar să faceți lucruri precum prefixarea automată.

Lea Verou dă un exemplu folosind proprietatea clip-path . Începem prin a seta valoarea proprietății pe care dorim să o prefixăm initial , dar folosim o proprietate personalizată, apoi continuăm să setăm valoarea fiecărei proprietăți prefixate la valoarea proprietății personalizate:

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

După aceasta, tot ce rămâne este modificarea valorii proprietății personalizate în interiorul unui selector:

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

Dacă doriți să aflați mai multe despre acest lucru, consultați articolul complet al lui Lea despre prefixarea automată cu variabile CSS.

Proprietăți personalizate CSS pentru antiglonțuri

După cum sa menționat, suportul browserului pentru proprietățile personalizate CSS este încă în mare parte nestandard. Deci, cum poate fi depășit acest lucru?

Aici intră în joc PostCSS și pluginul său, postcss-css-variables.

În cazul în care vă întrebați ce este PostCSS, verificați articolul meu PostCSS: SASS's New Play Date și reveniți la aceasta după ce ați terminat. Veți avea apoi o idee de bază despre ce puteți face cu acest instrument uimitor și nu vă veți simți dezorientat când citiți restul articolului.

Cu postcss-css-variables și opțiunea de preserve setată la true, putem păstra toate declarațiile funcției var() în ieșire și avem valoarea calculată ca declarație de rezervă. De asemenea, păstrează declarațiile --var calculate. Rețineți că, folosind acest plugin PostCSS, proprietățile personalizate pot fi actualizate dinamic după procesul de transpilare, dar valorile de rezervă vor rămâne aceleași, cu excepția cazului în care sunt vizate în mod specific și modificate în mod explicit individual.

Dacă căutați o modalitate fără pre/postprocesor de a utiliza variabilele CSS, puteți oricând să verificați manual suportul curent cu regula CSS @support și să aplicați o rezervă adecvată atunci când suportul este neregulat sau inexistent. De exemplu:

 :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; } }

Modificarea valorii unei proprietăți personalizate folosind JavaScript

Am menționat pe parcursul întregului articol că variabilele pot fi actualizate folosind JavaScript, așa că haideți să intrăm în asta.

Să presupunem că aveți o temă ușoară și doriți să o treceți la o temă întunecată, presupunând că aveți niște CSS ca următorul:

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

Puteți actualiza proprietățile personalizate --text-color și --background-color făcând următoarele:

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

Cazuri de utilizare interesante

De-a lungul anilor de dezvoltare și discuții cu privire la specificațiile CSS Custom Properties, au apărut câteva cazuri de utilizare interesante. Iată câteva exemple:

Tematică: Utilizarea unui set de teme pentru un site este destul de ușoară atunci când implementați variabile CSS. Vrei o variație deschisă sau întunecată a stilului tău actual? Doar schimbați valoarea unor proprietăți personalizate folosind JavaScript și ați terminat.

Îmbunătățiri de spațiere: trebuie să ajustați spațierea unui site, să zicem un jgheab între coloane? Schimbați valoarea unei singure variabile CSS și vedeți această modificare reflectată la nivelul întregului site.

Funcții calc() complet dinamice: Acum puteți avea funcții calc() complet dinamice folosind proprietăți personalizate în interiorul acestor funcții, eliminând nevoia de a face calcule complicate sau efemere în JavaScript și apoi actualizați manual aceste valori pe fiecare instanță.

Insuflați o nouă viață fișierelor dvs. CSS

Proprietățile personalizate CSS sunt o modalitate puternică și inovatoare de a aduce mai multă viață foilor de stil, introducând pentru prima dată valori complet dinamice în CSS.

Specificația se află în prezent în starea de recomandare candidată, ceea ce înseamnă că standardizarea este chiar după colț, un motiv bun pentru a vă scufunda adânc în această funcție și a profita la maximum de ea.