The first CSS variable: currentColor_html/css_WEB-ITnose

1. Basic introduction

CSS variables are slowly moving from initial draft to browser implementation. But there is a variable in the specification that has been around for years: currentColor. This CSS feature has good browser support and some practical applications. In this article, we will learn and understand it. Quoting the description from MDN:

We know that if you do not specify the value of border-color, it will default to the value of color:

	<style type="text/css">	.parent{ 		width: 100px;		height: 100px; 		color: red;		border: 1px solid;		box-shadow: 5px 5px 5px;		text-shadow: 3px 3px 3px;	}	</style>	<div class="parent">		没有设置边框颜色	</div>　

This is a pretty neat trick: if you change the color of the text, the border color will automatically change as well. This trick also works for outline, box-shadow, text-shadow, etc.

2. Some examples

<style type="text/css">.parent{ 	width: 100px;	height: 100px; 	color: #333;}.son {	border: 1px solid #333;	box-shadow: 2px 2px 2px #333;}</style><div class="parent">	<div class="son">没有设置边框颜色</div></div>

Let’s use currentColor to modify the above example:

<style type="text/css">.parent{ 	width: 100px;	height: 100px; 	color: #333;}.son {	border: 1px solid currentColor;	box-shadow: 5px 5px 5px currentColor;	text-shadow: 3px 3px 3px currentColor;}</style><div class="parent">	<div class="son">没有设置边框颜色</div></div>

Of course, you can also apply currentColor everywhere you want, like gradients, SVG, pseudo-elements, for example: make inline svg sprites display like icon fonts, like this:

svg {fill: currentColor;}

At this time, each svg element will be rendered as the text color of the parent element, please click view Demo

3. Support

IE9 and modern browsers support it .

Thank you for reading. I would like to criticize and correct any inaccuracies in the article.

Reprint statement:

Title of this article: The first CSS variable: currentColor