Singura calitate pe care o limbă trebuie să o dețină pentru a se califica pentru statutul unui limbaj de programare este variabilele. Ele sunt considerate incredibil de utile, salvează dezvoltatorii o grămadă de ore și forțe. În plus, variabilele pot îmbunătăți scrierea codului într-un mod cuprinzător.
Acesta este exact ceea ce lipsea CSS. Dinozaurii ca variabilele Sass și Less folosesc, dar nu au existat niciodată variabile în standardul CSS. Până azi.
Ele se aflau la orizont de mult timp, dar numai recent variabilele au început să fie introduse în CSS. Deci, cum funcționează?
Suport pentru browser
În prezent, variabilele CSS sunt acceptate numai de Firefox Nightly. Și, în realitate, nu le putem folosi. Cu toate acestea, în ciuda faptului că acestea sunt încă foarte, foarte crud (în versiune beta testivaniya) noi toți așteptăm cu nerăbdare la ceea ce ei vor fi în viața noastră în viitorul apropiat.
Pentru browserele de pe motorul Webkit există deja o modalitate de a obține variabile. În plus, acestea sunt, de asemenea, disponibile pentru anumite versiuni ale Chrome. care sunt activate prin intermediul pavilionului în pictogramele chrome: // și folosind prefixul -webkit.
În ceea ce privește IE, din păcate, ar trebui să așteptăm. Să vedem ce ne pregătește viitorul.
Cum se utilizează variabilele CSS
Cu toții știm foarte bine cum funcționează variabilele, deci numai sintaxa a suferit unele modificări. Iată cum vom declara variabilele în CSS:
Variabilele globale
Ca și în alte limbi de programare, puteți seta și variabilele globale. De exemplu, aceasta:
Folosesc pseudo elementul rădăcină deoarece interfața de nivel superior din DOM va fi cea care deține aceste variabile. Și ei, la rândul lor, vor lucra în jos copac DOM pentru toate elementele noastre.
Când vine vorba de aplicarea variabilelor, folosim funcția var () pentru a apela o variabilă. Acest lucru se poate face astfel:
După ce am declarat variabila de la rădăcina documentului, acum avem dreptul să îl folosim oriunde.
Context Variables
În plus față de variabilele globale, puteți seta o variabilă la un anumit element. În acest caz, valoarea sa se va modifica:
În acest exemplu particular, etichetele ancorei vor moșteni noile valori pe care le punem în elementul părinte. Cu toate acestea, nimic din acest div nu va folosi valorile specificate în elementul rădăcină.
Variabilele CSS vor fi de mare ajutor atunci când se vor opri la orizontul viitorului și se vor transforma în realitate. Ele pot deveni chiar și primele clopote pentru respingerea preprocesoarelor și revenirea la limbajul standard CSS.
Articole similare
Trimiteți-le prietenilor: