CSS color value currentColor

CSS property color can have a special value currentColor. Its computed value is same as the computer value of color property. One possible use case if to specify fill color value in SVG based on current color.

Examples – color currentColor

In the following code, CSS property color can be changed to the following values
  • red
  • green
  • orange
<style>
div {color:red;}
</style>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <rect width="100" height="100" style="fill:currentColor" />
    <text x="30" y="60" style="font-size:36px;fill:white;">
       IH
    </text>
</svg>
</div>
color refresh

Related

Specification and Browser compatibility

SpecificationStatusCategories
CSS currentColor valueW3C RecommendationCSS
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 4+ Yes 2+ Yes 9+ Yes 12+ Yes 4+ Yes 10.0-10.1+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 4.0-4.1+ Yes 10+ Yes 10+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments