currentcolor

CSS variables are always a hot topic when “the future of CSS” is discussed. They are actually coming natively, but using them in production (without a CSS preprocessor framework) is a long way off. However there is a feature that actually has some browser support now that has a CSS variable feel to it, and that’s the currentColor value.

It works like this:

div { 
  color: red; 
  border: 5px solid currentcolor;
  box-shadow: 0 0 5px solid currentcolor;
}

I learned about this from a panel at SXSW 2011 on CSS3 with Stephanie & Greg Rewis, Estelle Weyl, and Christopher Schmitt. Googling it turned up Divya Manian’s article who says:

[…] you can use this value to indicate you want to use the value of color for other properties that accept a color value: borders, box shadows, outlines, or backgrounds.

This value was first supported by Opera in 2009, since then, Firefox 3.5+, Chrome 1+, and Safari 4+.

Here’s the spec and the Can I Use information.

It will follow the cascade

body { color: red; }
div { border: 5px solid currentcolor; }

You can’t trick it.

Let’s say you wanted to exploit the variable quality to it, but then reset the color for the actual text… this won’t work:

div {
   color: red;
      
   border: 5px solid currentcolor;
   box-shadow: 0 0 5px currentcolor; 
    
   color: black;
 }

Everything will be black.

Use cases

• Using it in animation
• Button borders and SVG fills that match the text
• Interface design that inherits color all around components.