CSS currentColor (a CSS variable before CSS variables were cool)

CSS currentColor (a CSS variable before CSS variables were cool)

Subscribe to my newsletter and never miss my upcoming articles

CSS variables are becoming a standard, with more than 90% of currently used browsers supporting it out of the box. Before CSS variables, there was a CSS value that shared some common ground as CSS variables, called currentColor.

.message--danger {
    border: 5px solid currentColor;
    color: red;
}

About currentColor value

So, how does currentColor work? Basically, an element that has CSS property with currentColor value inherits the value of the color property (of the same element). Basically, the computed value of color will be applied as a value of currentColor.

This value can be applied to the following CSS properties: borders, outlines, box shadows, and backgrounds.

This is useful when borders, shadows, outlines or background share the same color value. It's great for keeping your code DRY in cases where other properties like background, borders, outline, etc. need to have the same color as text.

Simple example

In this example, we simply change the color in the BEM modifier classes and this changes text color, background color of the box to the left and border color.

Browser support

A bit more than 98% of globally used browsers support this CSS value. More info here: caniuse.com/#search=currentColor


These articles are fueled by coffee. So if you enjoy my work and found it useful, consider buying me a coffee! I would really appreciate it.

Buy Me A Coffee

Thank you for taking the time to read this post. If you've found this useful, please give it some likes, share and comment.

 
Share this
Proudly part of