Aceasta este o tehnologie experimentală
Deoarece specificațiile acestei tehnologii nu s-au stabilizat încă, consultați tabelul de compatibilitate pentru utilizarea în diferite browsere. De asemenea, rețineți că sintaxa și comportamentul tehnologiei experimentale se pot modifica în versiunile viitoare ale browserelor, în urma modificărilor din caietul de sarcini.
Site-urile complexe au o cantitate foarte mare de CSS, adesea cu o mulțime de valori dublate. De exemplu, aceeași culoare poate fi utilizată în sute de locuri diferite, ceea ce necesită o căutare globală și înlocuire, dacă această culoare trebuie schimbată. Variabilele CSS vă permit să stocați valoarea într-un singur loc și apoi să o reutilizați în orice alt loc. Un avantaj suplimentar îl reprezintă identificatorii semantici. De exemplu: record -main-text-color este mai ușor de înțeles decât # 00ff00. mai ales dacă aceeași culoare este folosită într-un alt context.
Variabilele CSS respectă cascada și mostenesc valorile de la părinți.
Utilizare primară
Notă: În specificația anterioară, prefixul pentru variabile a fost var-. dar ulterior a fost schimbat la -. Firefox 31 și versiuni ulterioare urmează noua specificație. (Bug 985838)
Primul pas cu variabilele CSS
Să începem cu acest simplu CSS, care va colora elemente din diferite clase de aceeași culoare:
Vom aplica acest cod HTML:
care ne conduce la aceasta:
Acest lucru conduce la același rezultat ca și cel precedent, dar vă permite să declarați proprietatea dorită o singură dată.
Moștenirea variabilelor în CSS și valorile returnate
Proprietățile personalizate pot fi moștenite. Aceasta înseamnă că, dacă nu este setată nicio valoare pentru o proprietate personalizată pe acest element, atunci se utilizează proprietatea părinte:
cu următorul CSS:
Ca rezultat, var (- test) va fi:
- pentru un element cu clasa de clasă = "doi". 10px
- pentru un element cu clasa de clasă = "trei". 2em
- pentru un element cu clasa de clasă = "patru". 10px (moștenit de la părinte)
- pentru un element cu clasa de clasă = "unu". valoare nevalidă. care este valoarea implicită pentru orice proprietate personalizată.
Folosind var (), puteți declara o mulțime de valori returnate atunci când această variabilă nu este definită, aceasta poate fi utilă atunci când lucrați cu Elemente personalizate și Shadow DOM.
Primul argument pentru funcție este numele proprietății personalizate. Al doilea argument pentru funcție, dacă este prezent, este valoarea returnată, care este folosită ca valoare de înlocuire atunci când proprietatea utilizatorului nu este validă. De exemplu:
Această metodă cauzează de asemenea probleme de performanță. Afișează pagina mai lent decât de obicei, deoarece are nevoie de timp pentru a analiza.
Rezonabilitate și utilitate
Conceptul conceptului CSS clasic, legătura cu fiecare proprietate, nu este foarte convenabil din punctul de vedere al proprietăților utilizatorilor. Atunci când valorile proprietăților utilizatorilor sunt procesate, browserul nu știe unde vor fi aplicate, deci trebuie să țineți cont de aproape toate valorile valide.
Din păcate, aceste valori pot fi utilizate prin intrarea funcției var (). într-un context în care s-ar putea să nu aibă sens. Proprietățile și variabilele de utilizator pot duce la expresii CSS nevalide, ceea ce duce la un nou concept de valabilitate în timpul rulării.
Compatibilitate cu browserele
[1] Chrome a implementat inițial această caracteristică folosind o sintaxă diferită, care trebuie să prefixeze numele proprietăților personalizate cu -webkit-var- pentru a le defini. Acestea ar putea fi apoi utilizate fără prefix în cadrul funcției -webkit-var (). În plus, implementarea a fost ascunsă în spatele funcției de activare a caracteristicilor experimentale WebKit în cadrul chrome: // flags. ulterior redenumit pentru a activa funcțiile Platformei Web experimentale.
[2] Chrome 34.0 a eliminat această funcție din cauza problemelor legate de performanță.
[3] Această caracteristică este pusă în aplicare în spatele preferința layout.css.variables.enabled. incapacitate de plată false și folosind vechea sintaxa nume_variabila var- în Gecko 29. Pornind de la Gecko 31, preferința este activată implicit și noul - este folosit sintaxa nume_variabila.
Etichetele și participanții la documente
Mulțumesc! Verificați-vă căsuța de e-mail pentru a vă confirma abonamentul.
Dacă nu ați confirmat anterior un abonament la buletinul informativ Mozilla, este posibil să fie necesar să o faceți. Verificați dosarul Inbox sau Spam în cutia poștală pentru a vedea dacă e-mailul a venit de la noi.
Ascundeți abonamentul la newsletter
Articole similare
Trimiteți-le prietenilor: