Přejít k navigační liště

Zdroják » Webdesign » CSS barva currentColor

CSS barva currentColor

Články Webdesign

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

Nálepky:

Č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

Komentáře

Subscribe
Upozornit na
guest
7 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
filip.jirsak

V článku se píše o podpoře v IE 9 a o starších prohlížečích. Já tenhle komentář píšu v Google Chrome 39, a do téhle škály ho zařadit nedokážu. Patří mezi IE 9 a novější, nebo je to starší prohlížeč? Nebo jsem se vrátil v čase a IE je jediný používaný prohlížeč?
Taky by bylo dobré hned na začátku napsat, že aktuální barvou se myslí vlastnost color nebo barva textu. Ono je to sice napsané později, ale u takového elementu <div style="color: red; background-color: blue">X</div> každý řekne, že jeho aktuální barva je modrá, ne červená.

Martin Hassman

Díky za upřesnění ohledně barvy textu. A ano, v Chrome i dalších dnešních běžných prohlížečích to funguje, autor je webdesigner a je zvyklý na problémy ve starých IE, proto neviděl důvod explicitně ony bezproblémové prohlížeče vyjmenovávat. Hledal jsem teď nějakou tabulku podpory, že bych ji přidal, ale nenašel, tak se spokojme s tímto tvrzením. Stačí?

filip.jirsak

Stačí, díky. Já také pamatuju doby, kdy se řešilo, že něco podporuje až MSIE 5.5 a 5.0 ne. Ale dneska už je i MSIE jinde, a existují věci, které umí jen MSIE a ostatní prohlížeče zatím ne. Třeba CSS Grid Layout. Dnes už to není věc problémovosti prohlížeče, ale toho, že si nějakou věc vymyslí tvůrci jednoho prohlížeče, a chvíli to trvá, než to implementují i ostatní. (No, dnes – vrátili jsme se přístupem ke standardům do doby MSIE 4.0 a NN 4.0, akorát tenkrát to bylo v rozporu se standardem, zatímco dnes se prohlásí, že standard to bude tehdy, až si toho navymýšlíme dost.)

Jirka Kosek

Snad by stačil link na http://caniuse.com/#feat=css3-colors

Já tedy vím, kdy byl vydán IE4, ale jsem rád, že nevím, kdy byl vydán Chrome 39. Kdo si to má pamatovat.

Martin Hassman

Díky Jirko, přesně tohle jsem hledal.

filip.jirsak

Chrome to podporovalo už minimálně ve verzi 4, která je starší než IE 9, Firefox už od verze 3, která je starší dokonce než IE 8. Čtenář s jistou základní znalostí prohlížečů, jejich verzí a přibližného data vydání je tak zmaten, protože článek vyznívá, jako by tyto verze prohlížečů uvedenou vlastnost nepodporovaly. MSIE je asi prohlížeč, kde lidé nejčastěji zůstávají u starší verze (protože pro jejich verzi Windows není novější verze), ale existují i uživatelé jiný prohlížečů, kteří zůstávají „pozadu“ – v případě Gecka spíš u jiných prohlížečů, než Firefoxu, u Opery spousta lidí zůstává u verzí postavených na Prestu.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.