CSS variables are slowly making their way from initial draft to browser implementation. But one variable has existed in the specification for years: currentColor. This CSS feature has good browser support and some practical applications, so now is an excellent opportunity to learn how to use it.

An Inherited Rule

One of the lesser-known features of CSS is that if you set color in a declaration together with the border without a specified color, the border will inherit the text color by default. I’ll use an HSL color, as an example:

h1 { 
	color: hsl(0,0%,44%);
	padding: 1rem;
	border-bottom: 4px solid; 
}

The result:

That’s a pretty neat trick: if you change the color for the heading, the border-color will automatically alter itself to match. The same is also true for outline and box-shadow.

By using currentColor, we can extend that feature to child elements.

 A Practical Example of currentColor

We’re well past blue links on web pages. Over the last decade it’s become common practice to set links to the same color as the text they are in. Of course, we still need to make clear that the links are still links. One of my favorite techniques is the following:

p { 
	color: #333; 
}
p a {
	text-decoration: none; color: #333;
	font-weight: bolder;
	display: inline-block;
	padding-bottom: .5rem;
	border-bottom: 1px dashed #333;
}

While this works, I think you can see the problem: we’re saying that links should be the same color as the surrounding text, while also using that color on their bottom border. That’s a repetition of the same color value three times: any design change would mean laboriously going through our stylesheet and altering each one.

Instead, let’s do the following: define the text color just once, and let the other properties in the link inherit it via currentColor

p { 
	color: #333; 
}
p a {
	text-decoration: none;
	color: currentcolor;
	font-weight: bolder;
	display: inline-block;
	padding-bottom: .5rem;
	border-bottom: 1px dashed currentcolor;
}

There are absolutely ways to accomplish this without using currentColor (mostly by using inherit), but doing something like the following is impossible without it:

body { 
	color: #f0f; 
}
hr {
	height: 10px;
	background: currentcolor;
}

You can use currentColor in all kinds of unexpected places, such as gradients and SVG. For example, to make inline SVG sprites to display more like icon fonts, you can use:

svg {
	fill: currentcolor; 
}

This way, every SVG icon will take the font color of its parent element.

What would be really great is if we could say something like color: (currentcolor) 10% lighter; but manipulations like that aren’t yet possible in standard CSS: they remain the domain of preprocessors, at least for now.

Support

Support for currentColor is surprisingly good: all modern browsers and their mobile equivalents, including IE 9+, support the keyword. Occasional browser rendering problems have been reported in Mobile Safari: as always, it’s important to test as you develop, not just as your work draws to a close.

Conclusion

Using currentColor in your styleheets is an excellent way to reinforce best DRY CSS practices, reinforce design cohesiveness, and prepare yourself for migration into pre-processors. In the future of the web – reflected in articles in this blog – variables will play a much greater role in front-end design and development.

Building typeface by Leonardo Gubbioni; photograph by Brun Marde, used with permission.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.