currentColor CSS érték használata

-

A currentColor egy speciális CSS változó, ami mindig az adott kódblokk color tulajdonságának értékét veszi fel.

Jelenleg a CSS változók támogatottsága nem túl jó – igaz a WebKit alapú böngészők már a következő verzióval implementálják, így már csak az Edge és a mobil böngészők lesznek lemaradva a modern eszközök közül – így, ha DRY szabályoknak megfelelő kódot szeretnénk írni tiszta CSS-el néhol komoly falakba ütközünk!

Ha minél kevesebbszer akarjuk magunkat ismételni és szeretnénk hatékonyabban jobb kódot írni, akkor használhatunk valamilyen preprocesszort, vagy postprocesszort. A cssnext segítségével már a következő projektünkben használhatunk jó pár CSS4-es megoldást!

Ahogy korábban már említettem, a correntColor egy olyan speciális, a böngésző által beállított változó (mi nem adhatunk neki értéket), aminek az értékét az adott blokkon belüli color tulajdonság értéke adja meg. Ez az érték öröklődhet is egy szülő elemtől.

Amint a fejlesztői környezetünkben elérhetőek lesznek a változók a currentColor kulcsszó használata bizonyos esetekben szükségtelenné válhat, hiszen saját változókkal is elkerülhetjük a folyamatos kód ismétlést.

A változó értékéből adódóan hátterek esetében nem igazán használhatjuk, mivel minden esetben megegyezik az értéke a szín értékével:

p {
    color: #999;
    background-color: currentColor;  /* használhatatlan eredmény */
}

Tulajdonságok, elemek amik öröklik a szín értéket

Számos olyan tulajdonság létezik CSS-ben, amik automatán megöröklik a color tulajdonság értékét:

  • border
  • box-shadow
  • outline
  • lista elem bullet-jei
  • <img> elem alt tag-je (amikor nem jelenik meg a kép)

Ha ezeknek a tulajdonságoknak nem adunk meg közvetlenül szín értéket, akkor öröklik a color tulajdonságnak beállított értékét!

A fentiek figyelembe vételével felmerül a kérdés, hogy a kódunk tisztán tartásán kívül, milyen hasznos dolgokra tudjuk használni a currentColor-t?

Használati eset – UI komponens szín séma beállítás

A correntColor megalkotása során a cél az volt, hogy kibővítsék a szín öröklődést!

Nézzünk két alap UI elemet, a radio-t és a checkbox-ot! Tiszta CSS segítségével, hogy tudjuk elérni, hogy ezeknek az elemeknek a színét csupán komponens szinten kelljen megadni? A válasz a currentColor!

See the Pen c47e0182dadd4c644dc33b836612e23e by Adam Laki (@adamlaki) on CodePen.

Összegzés

A currentColor annak ellenére, hogy sok kérdést vethet fel a használhatóságáról kapcsolatban, bizonyos esetekben hozzájárul ahhoz, hogy jobb kódot írjunk! CSS projektekben számos esetben implementálható, a jobban karbantartható kód érdekében. A támogatottság miatt nem kell aggódnunk, IE9-ig visszamenőleg tudjuk használni!

Kapcsolódó tartalom

 

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.