Grow your CSS skills. Land your dream job.

currentColor

Published by Chris Coyier

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+.

My own testing showed it work in: Firefox 4 and Opera 11, but NOT in Chrome 11 or Safari 5 (perhaps WebKit dropped it)1

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.

Limited...

Between the limited browser support, the fact you can't trick it, and that it's only used for a single color makes use cases for this pretty few and far between. If you can think of a good one, please share!

Update: here's a cool one - using it in animation.


1 This isn't in the spec, so if it doesn't work in a particular browser, it's not a matter of failure of standards support.

Comments

  1. Theo
    Permalink to comment#

    Chris,

    Do you use a preprocessor framework for the work you do? If not, why not?

    -Theo

    • onioneye
      Permalink to comment#

      Yeah, I’m dying to know that as well :D I’ve been thinking about getting into sass and compass lately, but I’m not really sure if that would be a good move for me, so Chris, please tell us something about your stand on preprocessor frameworks. :)

    • I’m not a fan of preprocessor frameworks =\ never enjoy learning a new syntax to do something I can do just fine as is.

      The past year or so, I’ve used PHP to render my CSS when developing and then copy-paste the generated source into a style.css file when it’s ready to go live.

      Found this nifty article that describes the process. But I can utilize a scripting language I already know (PHP) and I can create my own functions to generate my CSS with any number of arguments I care to use. It’s more self-defining that way and less restrictive.

      http://www.impressivewebs.com/dynamic-css3/

      Keep in mind I don’t use this in launched source, as it requires a header rewrite which some host servers don’t like. So keep this technique on a local dev server.

      Cheers :)
      - Brandtley

    • I don’t use them for the majority of work I do, yet. There are lots of reasons… I guess I should write a post about that. Partially formed ideas:

      - I don’t feel like I would save all that much time or solve problems I can’t get around otherwise
      - Would be hard to institute into some of my team-based workflows

      I don’t want to be negative at all though, because I love the syntax, if CSS was like that natively it would be a huge improvement.

    • TeMc
      Permalink to comment#

      @Chris: I see an excellent poll question for next month :-)

      “Do you use a preprocessor framework for the CSS work you do?”
      - Yes, all the time
      - Yes, here and there
      - No, I choose not to
      - A *what* for CSS ?

    • Permalink to comment#

      I have been using StaticMatic to generate content and such, and it really works for rapid prototyping. Like most things – there are strengths and weaknesses – but I will say, I have a pretty useful _base.sass collection of SASS mixins. (Feel free to nab it btw: https://github.com/andrewdc/hidden_rebel_base)

      In general – I have had a very positive experience with SASS, Compass, Staticmatic, etc. This may be because most of my complex stuff I build stand-alone, and then integrate into a site, …so perhaps that workflow doesn’t suit everyone.

      Like Chris mentions – in a team based workflow – using a framework directly can get messy if you have several designers and some are using it, and some not.

    • Theo
      Permalink to comment#

      I use SASS and Compass extensively in my Rails applications. They really help make your markup more semantic because you can inject common strategies directly into each CSS declaration without having to resort to a class named “rounded”, for example.

      However, I am a developer not a designer, so that might have something to do with its appeal for me.

      By the way, the SCSS format in SASS uses the same syntax as straight CSS, except that you can include functions and nest declarations.

  2. Binyamin
    Permalink to comment#

    It works me fine on Chrome 10 http://jsfiddle.net/laukstein/2ysAr/6/

  3. Permalink to comment#

    That use case you were looking for = writing a quirky CSS Tricks post about currentColor :)

  4. Dor
    Permalink to comment#

    Meh, I just use PHP as variables if I need them so much, easy, painless, and not have to worry about support.

    • TeMc
      Permalink to comment#

      Indeed. The same way we use PHP to create dynamic javascript, it does CSS as well

      body { 
       color: ;
       border:   solid ;
      }
  5. Permalink to comment#

    woahh! so hard to understand the css.. Im newbie :(

  6. Permalink to comment#

    Note that it’s supported by IE9+

This comment thread is closed. If you have important information to share, you can always contact me.

Projects

*May or may not contain any actual "CSS" or "Tricks".