CSS

How to use currentColor

currentColor is a CSS variable-like feature that’s been around for quite awhile now and has reasonably good browser support (it’s supported by all modern browsers and their mobile counterparts, and even IE9+, though bugs have been reported in mobile Safari).

While most variables are still being used with preprocessors until support becomes more widely established, currentColor can be used as-is.

currentColor is super useful under some specific circumstances, and well worth learning (especially since it’s not complicated).

Basically, currentColor allows you to extend inherited colors to child elements, even in situations where the regular

inherit

function won’t work.

Let’s say you want to match the color of your links to your regular paragraph text and add a dotted border along the bottom. In most cases, you’d do something like this:

p { color: #872657; }
p a { 
    color: #872657;
    text-decoration: none;
    padding-bottom: .3em;
    border-bottom: 1px dotted #872657;
    }

So now you’ve got three places where you have to declare your colors, or else your visitor’s browser will override your paragraph color and replace it with a plain old blue underlined link.

You’re probably thinking, “Big deal? So I had to declare it three times instead of once. Who cares?” That’s all fine until you go to make updates and you find that you’ve declared these colors all over the place in your CSS files and suddenly you have 30 hex values to change instead of 4.

currentColor makes your stylesheets easier to maintain in the long run. Instead of the above, you’d write your CSS like this:

p { color: #872657; }
p a { 
    color: #currentcolor;
    text-decoration: none;
    padding-bottom: .3em;
    border-bottom: 1px dotted #currentcolor;
    }

Now, when you want to update it, all you have to change is the paragraph color and your links will automatically update to the new hue.

This is very similar to how a border inherits the

color

it’s declared with, and doesn’t have its own

color

specified, it will simply inherit the text color.

currentColor works with color keywords (like “raspberry” or “emerald”), with the RGB cubic-coordinate system (including the #-hexadecimal or the

rgb()

and

rgba()

notations), and with the HSL cylindrical-coordinate system (including the

hsl()

and

hsla()

notations). So basically it works with any color declarations you’re likely to be using.

You can even use currentColor in things like gradients and SVG fills, making it easy to keep those elements up-to-date alongside your text, borders, and the like.

Since variables and pre-processors are going to become not only more common, but more necessary, implementing features like currentColor can help prepare designers for those inevitabilities.

Cameron Chapman is a freelance writer and designer from New England. You can visit her site or follow her on Twitter. More articles by Cameron Chapman
  • faz

    Hi,

    I just tryed it and I had to remove the # from #currentColor to be able to make it working.

    Don’t know if it’s a mistake or a implemntation update, but would be better to correct the article example.

    By the way, thanks for the tips.
    Faz

    • nobrandheroes

      I second this. For me on FF29, it sort of works with the ‘#’, but it is overriden if you set a color to the p element by itself. Without the hash, it works perfectly.

  • nobrandheroes

    Thanks for the tip, this is really great.

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress