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:

The currentColor keyword represents the calculated value of the element's color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default. It can also be used on properties that inherit the calculated value of the element's color property and will be equivalent to the inherit keyword on these elements, if any.

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