currentColor-CSS3非常有用的变量

一、currentColor-简介

currentColor顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,例如:

.xxx { border: 1px solid currentColor; }

二、currentColor的使用与表现

上面提到,currentColor表示“当前的标签所继承的文字颜色”。可能一下子蒙圈了,还是上代码的好,CSS代码如下:

aaarticlea/png;base64,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" alt="" />

于是,文本边框颜色就会是文章文字颜色,如下这样子:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVMAAABpCAIAAAAIv1dcAAAFcUlEQVR4nO3bP27iQBSAce6Tw3ALrmIpJ+AGLqlzAqpISEg0dEYCWQaEXKR9W4Q/Mx5DMmPjPPZ9P7lYsM2O0H54GLwjAWDP6K8HAOAPUD5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmBR5/JHo/9hG1j1+T9sg3t/K/6Dbfj3rRXlUz7lU37KC/x1tJRP+S+1Df++teqv/Ff05+W/IgXlD/9Xd6dt8JRP+ZEoP4m2wVM+5Uei/CTaBk/5lB+J8pNoGzzlU34kyk+ibfCUT/mRKD+JtsFTPuVHovwk2gZP+ZQfifKTaBs85VN+JMpPom3wlE/5kSg/ibbBU77y8g+yX8jX00cUgfKTaBv8UOXvcsnmbTvmzv3zY9kFZ133jvOuQw3pL/+0kKpR/kH2wS30tX/W1/q263Toc+SiuPzFtuU++UlZXg+oyult1+ajun+6e9Ywgx/cs8vfyfhyQFj+Lvdqz8few10uo8x7nd7j115+IcdVUH7xQ8ynhVSr85/r8PTOtJZfzjbTWe0/s73lvdh6tT98uMz6j99a+Rf5uKX8bCS5e5Xfydh5pnFK42OiF8rLP65Eirjyv9be8ZbKX878Vqtymu0vD+qPSdH4XFhmxfv5gPpjUuQLd2f4TFeU78iCiUDml3+75jemAD3RXH69klqiyz8t5Pjkf1tay29YZu58vqXkcrY5l1+V02Dy73wu9IPyHdnIj3kn45G0rgY82tWB3vKLS8BB+V/r++UfZP+EL/YNL1G+d8EX+e7cn8CXs835s6Ct/PD4jij/vnnW8k3+usjXe/aiuPzT6lJ7W/m1yPG6vOfuLc5LevXK4gqfw7/gn5Wzzfvbdvn9oCrz2+R/n781ZgT7/K24HdwHyr9n/nAyb2mFz7uqt5XvLuZ73+QLqT5l70z4GwcPMPhn+m08VTltvVxXZT4r8/OLeFUvM/eZ+mOymU4o/4cX6KX8x9lfj+n7yq+x/IMc187D8Ht+4PjpfDX4bH7PPy1kv247LZX68sNFfhGRxdadvfupX5+5/eDX+/I+5Yd+k72ItK0IdqSwfHei/vhH+6vbql7RMr2vV7cf+Z49+Cf7XTzh1F2+L+Mxa3j1x4QVvh9eoGP597PPgum9hfKbgmv+8bNZ8q38g+yDa7618tuW66Qqp+HU3Z8FBMfzq94PL9Cl/J2Ms+Yz+fyyq1H+XEaN3/87e73yw7b99Xz3Np7rM6Zm+4vte0u0+/zx6r1/J0/vC/tit/zwAi4iWXBnzjy7tT3PvOlA8yfAPugvv3FnjojUK6/kZurfi3xr53RbK3zlbNNWvr+wL8EHhFt+4/a+nlgr37l797xd6537z182d2Ywz+zet+/ee1/5M3xvVziTd2/sf8L/9tFd/p1rvoj8cN++s8LX55L+lbXyddNcvlrKy9dK2+Apn/IjUX4SbYOnfMqPRPlJtA2e8ik/EuUn0TZ4yqf8SJSfRNvgKZ/yI1F+Em2Dp3zKj0T5SbQNnvIpPxLlJ9E2eMqn/EiUn0Tb4Cmf8iNRfhJtg6d8yo9E+Um0Db6/8l96G9i9/4H/WtvgrvG89Db8+9aK8imf8ik/5QX+OlrKp/yX2oZ/31q95vdzAN1QPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMW/QPujazgBxZ+DwAAAABJRU5ErkJggg==" alt="" />

(我把边框改成3px了,上面的代码也就没改,知道就行啦。。。)

注意:由于是CSS3新增关键字,需要IE9+以及其他现代浏览器才有效果。

换种方式表示就是:currentColor = color的值

用图示意是:
aaarticlea/png;base64,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" alt="" />

任意替换性
凡事需要使用颜色值的地方,都可以使用currentColor替换,比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等。很灵活,很好用!

下面问题来了,我要让图片边框蓝色,直接:

border: 1em solid blue;

不就好了,还要费尽周折弄个currentColor搞摩斯(武汉话,’干嘛’意思)啊?这活生生多了好多字节的大小啊!

这个想法其实短见了,当我们应用一些CSS高级技能,尤其CSS3图形技术的时候,你会发现,currentColor就是雾霾天气下的强劲冷空气,带来无比的清爽与洁净,下面一章节的栗子大家不妨好好感受下!

三、 currentColor的实战表演秀

实战1:背景色镂空技术

这种设计的目的就是鼠标hover时候,图标可以跟着文字一起变色。如果不考虑兼容性问题,我们可以稍稍改造下,使其实现更加简单:

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

于是,我们想要鼠标hover文字链接,其图标颜色要跟着一起变化,只要改变文字颜色就可以了:

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

HTML结构如下:

<a href="##" class="link"><i class="icon icon1"></i>返回</a>

于是鼠标hover就是#333颜色图文合体变化:
currentColor-CSS3非常有用的变量

您可以狠狠地点击这里:背景色镂空技术与currentColor demo

实战2:CSS3图标生成与hover控制
所谓CSS3图标生成,就是图标完全由CSS3特性代码组合合成。由于多半跟链接文字混用,因此,有个交互效果就是:hover文字的时候,图标的颜色也要跟着变化。我一开始使用的是定值颜色,为了hover时候颜色控制方便,就大肆使用border属性构建图形,虽然效果也有,但HTML和CSS都啰嗦了点。借助currentColor, hover时候的颜色变化,我们根本无需关心,因为无论是border, background, 还是box-shadow都使用currentColor作为图形颜色,hover时候自然就会变成我们想要的文字颜色。

currentColor-CSS3非常有用的变量

具体每个图标代码也简化了,拿平铺图标举例,9个点:
currentColor-CSS3非常有用的变量

之前为了hover方便,使用border实现,于是5个元素上阵才模拟出来的,代码熙熙攘攘如下:

.ico-repeat::before,
.ico-repeat::after,
.ico-repeat z { width: 3px; height: 7px; border-top: 3px solid #777; border-bottom: 3px solid #777; top: 5px; left: 3px; }
.ico-repeat::before { left: 3px; }
.ico-repeat::after { left: 13px; }
.ico-repeat z { left: 8px; }
.ico-repeat z::before { width: 7px; height: 3px; border-left: 3px solid #777; border-right: 3px solid #777; top: 2px; left: -5px; }
.ico-repeat z::after { width: 3px; border-top: 3px solid #777; top: 2px; }

使用currentColor我们可以摆脱实现方式的限制,例如,我们可以使用box-shadow + currentColor, 只要一个元素就可以了。

.ico-repeat::before { width: 3px; height: 3px; background-color: currentColor; box-shadow: 0 5px currentColor, 5px 0 currentColor, 5px 5px currentColor, 10px 0 currentColor, 0 10px currentColor, 5px 10px currentColor, 10px 5px currentColor, 10px 10px currentColor; top: 5px; left: 3px; }

HTML方便也没有必要再内嵌一个<z>元素,直接如下就可以了:

<a href="javascript:" class="ico-a"><i class="ico ico-repeat"></i>平铺</a>

鼠标hover效果依然杠杠的,如下:
currentColor-CSS3非常有用的变量

其他很多图标也可以做类似的优化,例如列表图标可以放心使用background-color + border + background-clip单标签三边框生成技术,于是,只要两个元素就足够了,而之前至少要四个。
首先,borderbox-shadow默认的颜色就是当前的文字颜色,也就是类似currentColor
其次,在iOS Safari浏览器下(iOS8)下,currentColor还是有一些bug的,例如伪元素hover时候,background:currentColor的背景色不会跟着变化,怎么办呢?等升级,或者使用border来模拟。由于发现这个问题有一些时日,我有没有时间及时记录,因此,一些细节我也记不清楚了。

上一篇:sphinx 同时使用多个索引进行检索探究


下一篇:毕业设计之zabbix之nginx状态监控