CSS barva currentColor

Klíčové slovo currentColor obsahuje aktuální barvu elementu. Představíme vám, jak funguje.

Článek původně vyšel na autorově webu Je čas.

„Barva“ currentColor se používá jako jiné hodnoty pro nastavení barvy v CSS.

element {
  border: 1px solid currentColor; 
}

Element bude mít rámeček v aktuální barvě. Hodnota currentColor bývá u řady vlastností výchozí, takže je možné její uvedení vypustit. Následující konstrukce se proto zobrazí stejně jako ta předchozí.

element {
  border: 1px solid; 
}

Podpora

Klíčové slovo / „barva“ currentColor funguje od IE 9. Ve starších prohlížečích je možné využít výchozí barvy (bez přímého uvedení).

Využití

Použitím currentColor si můžeme usnadnit práci při kopírování barev. Typický příklad nastane u tlačítka, kterému chceme při :hoveru a :focusu změnit barvu písma i rámečku:

V CSS pro každý stav budeme deklarovat tutéž barvu pro písmo (color) i rámeček (border-color).

button {
  color: blue;
  border: 2px solid blue;
}
button:hover {
  color: red;
  border-color: red;
}
button:focus, button:active {
  color: green;
  border-color: green;
}

Zabránit nutnosti duplikovat barvy mohou CSS proměnné nebo proměnné v preprocesorech. Použití currentColor ale umožní udělat totéž mnohem elegantněji – nastavit jako barvu currentColor (nebo nic – vůbec ji neuvést) a měnit pouze color.

button {
  color: blue;
  border: 2px solid currentColor;
}
button:hover {
  color: red;
}
button:focus, button:active {
  color: green;
}

Jelikož se barva (color) dědí, lze tohoto chování využít i pro vnořené elementy nebo pseudo-elementy.

Samostatná ukázka využití currentColor

Klíčové slovo currentColor je u řady vlastností zbytečné uvádět. Kvůli podpoře pro IE 8 a starších dokonce nežádoucí.

Živá ukázka bez uvádění barev

Autor se webdesignu intensivněji věnuje od roku 2005. V poslední době se zabývá hlavně tvorbou responsivních webů a frontendem. Od roku 2013 o tom píše na webu jecas.cz.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 7

Přehled komentářů

filip.jirsak Co na to říct?
Martin Hassman Re: Co na to říct?
filip.jirsak Re: Co na to říct?
Bohumil Jahoda
Jirka Kosek Re:
Martin Hassman Re:
filip.jirsak Re:
Zdroj: https://www.zdrojak.cz/?p=14020