CSS barva currentColor

„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í.

• border: 1px solid
• outline: 1px solid
• box-shadow: 10px 5px 5px
• text-shadow: 10px 10px 5px

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

Odkazy jinam

• Extending the Color Cascade with the CSS currentColor Variable