The currentColor keyword is a special CSS variable which gets its value from the current scope color property. It was the first CSS variable although we can’t give it a value directly.
This feature of the CSS is less known. The main reason for this is that the use cases are not so exciting and there aren’t many. Mostly it is connected to the ::before, ::after pseudo-elements or theme design. Mostly you won’t use it in your daily work!
Most of the current browsers support the custom properties a.k.a. CSS variables. Also worth noting that the CSS preprocessors where we can use variables too (it is a little different from the custom properties, but useful anyway). This fact makes the currentColor a bit useless, but it is still can be helpful in some cases. The support of it is almost perfect.
You can use the keyword where a color value is excepted. With the advantage of it, you can write a little bit more DRY (Don’t Repeat Yourself) code. The value came from the current scope if there isn’t a color value than it came from the parent – and so on – and at the and of the chain it came from the browser defaults.
Bazar is a powerful "headless" e-commerce system. Built on Laravel and Vue.
Properties that inherit the color values by default
Nice to known that there a bunch of property that inherits the color value by default, so you don’t need to use any color value if you like to use the same value as your color’s property.
These properties are the followings:
- element’s text, border, box-shadow,
- text’s outline,
- img alt value,
- list item’s bullets and border.
Use Case – Styling ::before and ::after
Currently, at Pine Code, we are using the currentColor value at the post list where we mark the categories with one unique color.
See the Pen currentColor usage with ::before and ::after by Adam Laki (@adamlaki) on CodePen.
The colored rectangle behind the blocks gets its value from the primary block color value. This is needed because we can’t target pseudo element from HTML and the category colors are dynamic. With this technique, we don’t use a plus element for the color block. It’s straightforward and useful.
Use Case – Styling form components
If you make a colorized component block where you like to you the same color on multiple element you can write your code to use the currentColor. It can be handy when you write a form component where you like to style multiple element like the readio, checkbox or button.
See the Pen UI Kit with currentColor by Adam Laki (@adamlaki) on CodePen.
In this example you can clearly see that this type of design can be tricky. You have to careful not to overwrite the default color on some other parent. You also may need some extra wrapper on some your element.
Summarize the currentColor keyword
As you see and as I mentioned this is not the most useful keyword but this is not a problem. This is a simple bit in CSS which can help you write a little bit different or better code.
