With CSS preprocessors like SASS or LESS being a must to use in every new project we often forget that
CSS already comes with some powerful built-in features nowadays. One such feature is the
This property allows you to use the color value on other properties such as
If you want to create an outline button that always has the same text color and border color you can just do this:
<div style="color: red; border: 1px solid currentColor">button</div>
It also inherits the color of its parent:
<div style="color: blue;"> parent <div style="background-color: currentColor">child</div> </div>
This can be very handy when your are building UI components and also helps keeping our code a little shorter.
currentColor keyword is supported in all major browsers.