currentColor

Published
March 17, 2011
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.

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!

Share On

Comments

Chris: Would you happen to know if this is different in any way from simply not specifying the color value of the border at all (as seen below)? I’ve been doing it like that for a long time now, not really reflecting over it – it simply works.

Yeah, if you check out the comments in this post, people mention a number of elements that will ‘inherit’ color from the color property. Basically, anything in the foreground will do this, which includes borders, text, list markers, alt text on images (if the image isn’t there), and even the HR element will take the value from the color property. I assumed it would also have effect on elements drawn on a canvas, but I think that was taking my assumptions a little too far. :)

This basically seems to be how currentColor works, as Chris mentions– a ‘reaction’ to that already existing behaviour. So now I guess it’s not just limited to the foreground elements, but anything that accepts a color value.

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.

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.

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.

Works with border, but not -webkit-box-shadow (http://jsfiddle.net/n8chy/) — I think that means it’s not implemented, because the border-color behavior existed long before this currentColor thing was implemented.

Yes, it works for borders and everything where not specifying color used to default to current color: http://jsfiddle.net/2ysAr/show/ and it works on all browsers. I do not think the default for box-shadow is current color but is a UA-chosen color. So this will not apply.

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

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.