First CSS variable: currentColor, csscurrentcolor

First CSS variable: currentColor, csscurrentcolor
I. Basic Introduction

CSS variables are gradually implemented from the initial draft to the browser. But there is a variable in the specification that has existed for many years: currentColor. This CSS feature has good browser support and some practical applications. In this article, we will learn and understand it. Reference the description in 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 border-color value, it will fill the color value by default:

<Style type = "text/css">. parent {width: 100px; height: 100px; color: red; border: 1px solid; box-shadow: 5px 5px 5px; text-shadow: 3px 3px ;} </style> <div class = "parent"> no border color is set </div>

This is a clever trick: If you change the text color, the border color will automatically change. This technique also applies to outline, box-shadow, text-shadow, and so on.

Ii. Some Instances

<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"> no border color is set </div>

　　

Next we will use currentColor to modify the previous 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 currentColor ;} </style> <div class = "parent"> <div class = "son"> no border color is set </div>

Of course, you can also apply currentColor in all the places you want, such as gradients, SVG, and pseudo elements. For example, make inline svg sprites display like icon fonts, as shown below:

svg {fill: currentColor;}

In this case, each svg element is rendered as the text color of the parent element. Stamp view Demo

Iii. Support

IE9 + and modern browsers are supported.

 

Thank you for reading this article. I hope you can correct it.

 

Reprinted statement:

Title: First CSS variable: currentColor

Reprinted please note