CSS változók


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ó.
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 (míg a SASS kódot először le kell fordítanunk a böngésző számára is értelmezhető CSS kimenetre).
A modern böngészők nagy részében már támogatott, de például Internet Explorerben egyáltalán nem é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 a https://caniuse.com/ -ról származik).
A zöld szín a teljeskörűen támogatott, a sárga a részben támogatott, a piros pedig a nem támogatott.

További előny, hogy JavaScripttel hozzáférhetünk és módosíthatjuk is.

Nézzünk egy pédát a használatra:

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.

Hírlevél feliratkozás

* kötelező mezők