Proprietăți personalizate css

Această traducere a „CSS personalizate Proprietăți - Noțiuni de bază“ - primul dintr-o serie de articole despre Serdzhio Gomesa proprietăți CSS personalizate. Aceasta explică elementele de bază foarte: ceea ce este proprietățile personalizate și cum să le folosească.

Browser-ul Suport

Să începem cu cel mai important lucru: în cazul în care lucrările CSS personalizate proprietate? De fapt, sprijinul este deja un moment destul de bun plin în Chrome, Opera, Firefox și Safari; Edge pentru a se dezvolta. Track poate fi pe Pot utiliza variabilele CSS (Personalizat Proprietăți).

Acest lucru înseamnă că ele pot fi deja utilizate pentru îmbunătățirea progresivă, și în curând ca metodă principală. La sfârșitul articolului un pic despre modul de a reproduce funcționalitatea de proprietăți personalizate PostCSS plugin-uri.

Setați valoarea la orice valoare

Ce este o proprietate personalizată? Pe scurt, această proprietate CSS, care poate fi numit și utilizate de către dezvoltator. Spre deosebire de proprietățile încorporate, cum ar fi culoarea sau poziția, fiecare dintre care browser-ul înțelege un anumit mod, au o proprietate personalizată nu are altă valoare decât cea pe care o va cere.

Proprietățile personalizate sunt diferite de la normal pur și simplu prin nume - acestea au prefixul „-“. Browserul nu face nimic cu noua proprietate. Dacă specificați o proprietate de culoare. apoi elemente care se potrivesc cu selectorul pentru a schimba culoarea textului, dacă setați valoarea proprietății --text-culoare. schimbarea imediată nu se va întâmpla.

Proprietățile CSS personalizate pot fi stocate orice valoare CSS validă.

reutilizarea

De la proprietăți personalizate ar fi de folos, dacă ai putea să le cereți valori. La un nivel minim, aveți nevoie de mai mult și de a le înapoi!

Pentru a face acest lucru, există var) funcția (.

Aici, vom atribui valoarea fundalul butonului, care este stocată în proprietatea --theme-culoarea utilizatorului. La început poate părea că există o mică diferență între această metodă și atribuirea directă. Dar beneficiile devin mai evidente atunci când vom începe să utilizați --theme culoare în multe selectori și proprietăți.

valorile implicite

Ce se întâmplă dacă nu --theme-set de culori? var () poate lua un al doilea parametru opțional a cărui valoare este folosită în mod implicit.

Important: Dacă doriți să utilizați ca valoare implicită alte bunuri personalizate, sintaxa corectă background-color: var (- tema de culoare, var (- fallback-culoare));

Domeniu de aplicare și cascadă

În cazul în care trebuie să setați aceste valori înainte de utilizare? proprietăți personalizate urmați regulile standard, cu privire la domeniul de aplicare și cascadă, astfel încât să știi deja cum funcționează!

De exemplu, pentru ceva de genul --theme-culoare este cel mai bun de a utiliza domeniul de aplicare la nivel mondial că valoarea a fost disponibil peste tot. Cel mai simplu mod de a face acest lucru cu ajutorul unor pseudo-clase: rădăcină:

Valoarea va fi disponibilă oriunde în document și va fi capabil de a utiliza toate butoanele, titlurile și imagini.

Dar dacă vrei să fi avut o culoare proprie de fiecare parte a site-ului dvs.? Tu faci totul la fel ca înainte, dar acum vi se cere o proprietate personalizată în loc de a schimba fiecare proprietate în cazul în care acesta este utilizat.

Și, bineînțeles, puteți face întotdeauna o excepție prin solicitarea unor astfel de selectoare complicate ceea ce ai nevoie.

CSS Matematica

Funcția calc () se combină adesea diferite unități de măsură:

În timpul executării browser-ului calculează dimensiunea finală în pixeli, care depinde de lățimea părintelui.

Un alt as în calcarul gaura () - poate fi folosit cu proprietăți personalizate! Această combinație poate fi foarte util, așa că a acordat o atenție deosebită proprietăților de specificație utilizatorului.

Puteți combina chiar și unități diferite, cu condiția ca rezultatul final va fi semnificativ.

Compararea proprietăților personalizate cu variabile în Sass, mai puțin, PostCSS sau alte Precompilator ține cont de faptul că proprietățile personalizate - acestea sunt esența reală a browser-ului. Acest lucru înseamnă că pot fi schimbate în mod dinamic în timpul execuției, în contrast cu preprocesare rezultate.

Proprietățile personalizate sunt disponibile la orice metode membru getPropertyValue și setProperty.

Schimbarea valorii unei proprietăți personalizate afectează imediat toate proprietățile care depind de ea, ca și cum le-ați schimbat în mod direct. Deci, este o modalitate foarte bună de a schimba imediat set de elemente cu ajutorul script-uri.

Mai multe informații despre acest subiect și cele mai bune practici în utilizarea proprietăților personalizate în articolul următor.

Anexă: plugins PostCSS

Dacă doriți să începeți să utilizați proprietăți CSS personalizate chiar acum, dar trebuie să lucreze în browsere care nu le acceptă încă, puteți completa spațiile libere folosind plugin-uri PostCSS.

Iată o scurtă trecere în revistă a principalelor utilizări ale proprietăților personalizate și suportul lor într-o pereche de plugin-uri populare.