DEV Community

"currentColor", the first CSS variable

Ken Bellows on April 29, 2019

The recent addition to CSS of Custom Properties, a.k.a. CSS variables, was a very welcome addition to the language. It's opened the door for a lot ...
Collapse
 
elizabethschafer profile image
Elizabeth Schafer

Thanks for writing this up, this is really interesting! I love deep dives like this into things I've never really paid much attention to.

I also really like how you walk through the steps of how you'd expect things to work, which includes running into issues and figuring out what you need to fix to make it work. It makes it much easier to understand how things work, and why you might need to write things a specific way.

Looking forward to future posts!

Collapse
 
kenbellows profile image
Ken Bellows

Thanks! 😁 I usually find that working through weird errors and unexpected behaviors is the best way to really learn the details of a feature, so I like to show that. I'm glad someone else appreciates the approach!

Collapse
 
luker profile image
Luke Robinson

My favorite use of currentColor is setting an outline (or border) color on anchors in focus. A quick win to improve keyboard accessibility. For example: a:focus {outline: 3px dotted currentColor;}. Cheers!

Collapse
 
rafaelcastrocouto profile image
@racascou

Awesome article! One thing bothers me (a lot): it should be called current-color like everything else in CSS

Collapse
 
kenbellows profile image
Ken Bellows

Ha, I know what you mean, it does seem a little inconsistent. But it actually follows the standard pattern for color names, like "MediumVioletRed", "DarkOliveGreen", or "RebeccaPurple". CSS treats these names case-insensitively, so I actually write all lowercase currentcolor most of the time.

Collapse
 
emanuelvintila profile image
Emanuel Vintila

Man, every time I dive into the docs to find something specific, I end up learning about something unexpected.

Same.

Collapse
 
vijayjangid profile image
Vijay Jangid

interesting! I wasn't aware this is something from CSS. Thanks for digging and sharing it with us.