Introduction to the use and compatibility of CSS3 new property currentColor

This chapter will tell you about the use of the new CSS3 attribute currentColor and the compatibility of the currentColor attribute. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

currentColor as the name means "current color", to be precise it should be "current text color", for example:

.xxx { border: 1px solid currentColor; }

currentColor means "the text color inherited by the current label", alternatively The way to express it is: currentColor = the value of color.

Wherever a color value is needed, you can use currentColor to replace it, such as background color – background-color, gradient color – gradient, box shadow – box-shadow, SVG fill color – fill, etc. Very flexible and easy to use!

Of course, you can use css to hollow out the background color, which can easily control the color of the icon. The implementation principle is that the icon shape area is transparent and hollow, while the surrounding area is solid color.

css code:

.icon {
    display: inline-block;
    width: 16px; height: 20px;
    background-image: url(sprite_icons.png);
    background-color: #34538b; /* 该颜色控制图标的颜色 */
}
.icon1 { background-position: 0 0; }
.icon2 { background-position: -20px 0; }
.icon3 { background-position: -40px 0; }
.icon4 { background-position: -60px 0; }
.link { margin-right: 15px; }

html code:

更改颜色：<input id="colorInput" type="color" value="#34538b" autocomplete="off">
<p>
    <i class="icon icon1"></i><a href="##" class="link">返回</a>
    <i class="icon icon2"></i><a href="##" class="link">刷新</a>
    <i class="icon icon3"></i><a href="##" class="link">收藏</a>
    <i class="icon icon4"></i><a href="##" class="link">展开图片</a>
</p>

js code:

var eleInput = document.getElementById("colorInput"),
    eleIcons = document.getElementsByTagName("i");
eleInput.onchange = function() {    var i = 0, l = eleIcons.length;    for (; i<l; i+=1) {
        eleIcons[i].style.backgroundColor = this.value;
    }
};

You only need to change the color of the background image to change the color of the image. Lower versions of IE are also supported.

Effect address:http://www.zhangxinxu.com/study/201307/background-color-insert-background-image.html

Then use currentColor now To achieve this effect:

.icon {
    display: inline-block;
    width: 16px; height: 20px;
    background-image: url(../201307/sprite_icons.png);
    background-color: currentColor; /* 该颜色控制图标的颜色 */
}

So, we want the mouse hover text link, and its icon color to change accordingly, just change the text color:

.link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */

Instructions:

The default color of border and box-shadow is the current text color, which is similar to currentColor;

Under the iOS Safari browser (iOS8), currentColor still has some bugs, such as pseudo-element hover Sometimes, the background color of background:currentColor will not change accordingly. What should I do? Wait for the upgrade, or use border to simulate.

currentColor browser compatibility:

Supported browsers: Google, Firefox, QQ Browser, IE9

Unsupported browsers: 360, IE low version browser

For detailed introduction, please see:http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/

The above is the detailed content of Introduction to the use and compatibility of CSS3 new property currentColor. For more information, please follow other related articles on the PHP Chinese website!