"CSS Black Tech 1" write dry code using CSS's CurrentColor variable

| Introduction If you are already sass or less users, you must have been in your style sheet used variables, but also know the existence of variables, it will be very flexible to use, if you have not used, it is necessary to have a common CSS in the existence of variables, then we will recognize this special variable it: CurrentColor

The benefits of variables

CSS, if the use of variables, will let our code can dry (don ' t repeat youself: specifically in the design and calculation to avoid duplication of code, because it will reduce flexibility, simplicity, and may lead to conflict between the code), This is especially useful when we manage and maintain large projects because it often involves a large number of duplicate values.

One of the common use cases for variables is the color theme. For example, in a project, the color scheme is usually used to re-use some colors, if the scheme changes these values, we would most like to, just modify these values in the variable, the entire color scheme produces the result is also changed.

 

CurrentColor

The CurrentColor keyword is like a CSS variable, so let's take a look at his official definition :

That is:CurrentColor is the value of the Color property, meaning: The value of the CurrentColor keyword is the computed value of the Color property value.

• If the CurrentColor keyword is applied to the color property itself, it is equivalent to color:inherit.
• What do these words mean? Let's look at an example.

• If you can immediately know the results of the above code, then you will almost understand the meaning of the CurrentColor keyword.
• The above code will have a red border on the Div, which explains that the default value of the Border-color property is the value of the Color property;
• If you delete the color attribute definition from the above code, the color of the border will depend on the value of the parent element, because color has inheritance;

Give me a chestnut.

Let's use chestnuts to further illustrate this magical currentcolor.

This is an SVG icon + explanatory text button, which means that if we set different styles for the button's various states (: hover,: Focus,: Active), there will be code similar to the following:

If, uh, yes, if one day, the designer (maybe product? Students to change the color scheme, the site is not blue tone, replaced by a gray hue

We had to hard to change the color again, just change the color of the text is not, but also have to change the inside SVG

If we use the color of currentcolor,svg and the color of the border, the value of color will be used

The main significance--cascade

Yes, that's amazing. when an element has a color value, whether it is explicitly set or inherited , some of that element can accept <color> values (such as Border-color, Background-color, fill, and so on) the foreground element using CurrentColor will inherit the color value by default

Elements will get/inherit the element color value including:

• The text content of the element-exactly where the color attribute is used
• Outline of text
• The border of the element
• The box shadow of the element
• the ALT text of the IMG . That is, when an image cannot be displayed, the text that appears in place of the image inherits the color value.
• Small black dots and borders for list items
• The border color of some browsers (such as chrome) horizontal lines (). (Without a border, the color will not be affected)

If you do not explicitly color them in these properties of an element, they inherit the color computed value of the element by default .

As we understand the above, the main meaning of the CurrentColor attribute is color cascading, which can be useful in a variety of places. by CurrentColor This attribute, we can relate the color of each relevant place, and we'll finally get to the 2 chestnuts to understand it.

1, as shown in the GIF image below. Simon uses the developer tools in the browser and the color picker to change the value of the Color property, and then gets a preview of the real-time component color change.

Address:http://simurai.com/blog/2014/05/04/cssconf/ Yes currentcolor This black tech I saw him on the cssconf.

2. The following is an example created by Scott Kellum, who further understands the concept and adds an animated effect to the color attribute. when the color property value changes, all elements affected by that color change their color. Take a look at the example Scott Kellum (@scottkellum) created on Codepen

Address:http://codepen.io/scottkellum/pen/Fhxql/

Conclusion

Thanks for reading, if you have other black technology, kneel and beg to share ~

"CSS Black Tech 1" write dry code using CSS's CurrentColor variable