Az előző cikkünkben kifejtettük, hogy mik azok a CSS előfeldolgozók (SASS, LESS) és miért érdemes őket használni. A mai cikkünkben a CSS változókról lesz szó.
Korábbi cikkünkben kifejtettük, hogy mik azok a CSS előfeldolgozók (SASS, LESS) és miért érdemes őket használni. A mai cikkünkben a CSS változókról lesz szó.
Nagy előny, hogy ezek használatához nincs szükség a preprocesszorokra (előfeldolgozókra), hanem ezeket közvetlenül a CSS is képes feldolgozni, ezáltal a böngészők egyből tudják értelmezni őket (míg a SASS kódot először le kell fordítanunk a böngésző számára is értelmezhető CSS kimenetre).
Ez azért jó, mert használatukkal nagyobb rugalmasságot érhetsz el a tulajdonságok kezelésénél, kevesebb lesz a kódismétlés és olvashatóbbá válik a kód. Sajnos persze vannak kivételek, például az Internet Explorerben egyáltalán nem támogatottak és Microsoft Edge-ben is van pár ismert hiba, ami nem megfelelő működést eredményez.
Az alábbi táblázat mutatja a támogatottságot a különböző böngészőkben (a táblázat forrása: https://caniuse.com/). A zöld szín a teljes körűen támogatott, a sárga a részben támogatott, a piros pedig a nem támogatott.
Ahogy már említettük, a CSS változókat használhatjuk előfeldolgozók nélkül is. Emelett lehetőségünk van ugyanazt a tulajdonságot a különböző szinteken meghatározni, amire az előfeldogozók nem képesek.
További előny, hogy JavaScripttel hozzáférhetünk és módosíthatjuk is.
A fenti példában először is a ":root" pszeudo osztállyal meghatároztuk a változónk hatókörét.
Ez ebben az esetben a "<html>" elemet jelöli.
A változót a "--változó_neve: változó_értéke;" formában hozzuk létre, használni pedig így tudjuk: "tulajdonság: var(--változó_neve);".
Fontos megjegyezni, hogy követik az öröklés szabályait és érzékenyek a kis és nagy betűkre.
Tehát a
és a
két külön változót jelöl.
Kérj tőlünk ajánlatot, vedd fel velünk a kapcsolatot vagy keress minket e-mailben: hello@whiteelephant.digital!