CSS3 currentColor

CSS variables are always a hot topic when “the future of CSS” is discussed. They are actually comingnatively, 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.