currentColorCSS3超高校级好用CSS变量

更新于2016-06-23
本文题目已从“currentColor-CSS3超高校级好用CSS关键字”变更为“currentColor-CSS3超高校级好用CSS变量”。

一、currentColor-真正大隐于市者

实际上&＃xff0c;之前“SVG图标颜色文字般继承与填充”一文就简单介绍过currentColor, 后来有同事问此关键字&＃xff0c;说没见过。我意识到&＃xff0c;应该好好大家宣扬currentColor一番。

currentColor顾名思意就是“当前颜色”&＃xff0c;准确讲应该是“当前的文字颜色”&＃xff0c;例如&＃xff1a;

.xxx { border: 1px solid currentColor; }

没错!再说一遍&＃xff0c;没错&＃xff01;就是这么一个长得很不和谐的单词就是CSS3中一个标准且重要且强大的关键字。

什么&＃xff1f;你没见过&＃xff01;&＃xff01;孤陋寡闻了吧~~过来~~来嘛~~只告诉你一个人哦&＃xff0c;鄙人其实……已经使用有一段时日了&＃xff0c;超赞的&＃xff01;

没事没事&＃xff0c;别慌&＃xff0c;现在开始认识还来得急&＃xff0c;也会让你爽滴&＃xff01;

二、currentColor的使用与表现

上面提到&＃xff0c;currentColor表示“当前的标签所继承的文字颜色”。可能还有小伙伴一时半会没消化过来&＃xff0c;炒两个简单板栗助消化&＃xff0c;CSS代码如下&＃xff1a;

img[src$&＃61;&＃39;mm1.jpg&＃39;] { border: 1em solid currentColor; }

于是&＃xff0c;如果御用妹子直接暴露在本文中&＃xff0c;妹子边框颜色就会是文章默认文字颜色&＃xff0c;如下这样子&＃xff1a;

我的鑫空间

标签文字颜色是蓝色(pre { color: blue; })&＃xff0c;于是&＃xff0c;我把御用妹子放在
标签中&＃xff0c;则边框则是蓝色&＃xff0c;如下&＃xff1a;
 
 
注意&＃xff1a;由于是CSS3新增关键字&＃xff0c;需要IE9&＃43;以及其他现代浏览器才有效果。
 
换种方式表示就是&＃xff1a;currentColor &＃61; color的值
 
用图示意是&＃xff1a;
 
任意替换性
 凡事需要使用颜色值的地方&＃xff0c;都可以使用currentColor替换&＃xff0c;比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等。很灵活&＃xff0c;很好用&＃xff01;
 
下面问题来了&＃xff0c;我要让图片边框蓝色&＃xff0c;直接&＃xff1a;
 
border: 1em solid blue;

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

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

三、 currentColor的实战表演秀

实战1&＃xff1a;背景色镂空技术
去年介绍过“CSS背景色镂空技术”&＃xff0c;可以方便控制图标的颜色&＃xff0c;很赞的想法。此文章对应demo可以轻戳这里访问。

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

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

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

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

HTML结构如下&＃xff1a;

返回

于是鼠标hover就是#333颜色图文合体变化&＃xff1a;

您可以狠狠地点击这里&＃xff1a;背景色镂空技术与currentColor demo

实战2&＃xff1a;CSS3图标生成与hover控制
今天开春时候写过有一定反响的“CSS3图标图形生成技术个人攻略”一文&＃xff0c;那个时候还没有意识到可以借助CSS3 currentColor简化工作量和HTML代码。现在可以使用同样的例子感受下currentColor的风采。

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

于是&＃xff0c;之前文章demo中下图这些CSS代码就多余了&＃xff1a;

具体每个图标代码也简化了&＃xff0c;拿平铺图标举例&＃xff0c;9个点&＃xff1a;

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

.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我们可以摆脱实现方式的限制&＃xff0c;例如&＃xff0c;我们可以使用box-shadow &＃43; 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方便也没有必要再内嵌一个元素&＃xff0c;直接如下就可以了&＃xff1a;

平铺

鼠标hover效果依然杠杠的&＃xff0c;如下&＃xff1a;

其他很多图标也可以做类似的优化&＃xff0c;例如列表图标可以放心使用background-color &＃43; border &＃43; background-clip单标签三边框生成技术&＃xff0c;于是&＃xff0c;只要两个元素就足够了&＃xff0c;而之前至少要四个。

若想感受&＃xff0c;您可以狠狠地点击这里&＃xff1a;CSS3图标图形生成与currentColor demo

补充于2015年7月24号
今天写color颜色知识这篇文章的时候&＃xff0c;突然想到&＃xff0c;currentColor还有一些重要的信息一致要说&＃xff0c;但没时间补上。

首先&＃xff0c;border和box-shadow默认的颜色就是当前的文字颜色&＃xff0c;也就是类似currentColor&＃xff1b;
其次&＃xff0c;在iOS Safari浏览器下(iOS8)下&＃xff0c;currentColor还是有一些bug的&＃xff0c;例如伪元素hover时候&＃xff0c;background:currentColor的背景色不会跟着变化&＃xff0c;怎么办呢&＃xff1f;等升级&＃xff0c;或者使用border来模拟。由于发现这个问题有一些时日&＃xff0c;我有没有时间及时记录&＃xff0c;因此&＃xff0c;一些细节我也记不清楚了。

四、结语&＃xff0c;体系中方能彰显强大

在CSS2.1的年代&＃xff0c;虽然没有currentColor, 我们依然可以该蹦蹦该跳跳&＃xff0c;因为&＃xff0c;那时候图形这些东西都是交给图片完成的。但是&＃xff0c;CSS3(以及SVG)的强大特性、硬件发展&＃xff08;屏幕&＃xff09;以及设计趋势赋予了其新的使命&＃xff0c;图形构建就是其中之一。然而&＃xff0c;阻碍之一就是如何方便控制图形的状态变化&＃xff0c;幸好&＃xff0c;我们有currentColor&＃xff0c;图形跟随文字颜色状态同时变化&＃xff0c;达到了「图文合一」的境界&＃xff0c;这种境界已经超越font-face, 必将在未来的web技术大潮中大放异彩&＃xff01;