李东的技术博客

文章内容Content

CSS中的CurrentColor是一个很有威力的家伙

2016/09/05 578 ℃ 抢个沙发

by LiDong from https://www.lidongtech.com/css-currentcolor-power.html
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处。如果只是引流,请随意~

按捺不住心中的想要喷薄而出的“洪荒之力”,我决定要写点什么了……

最印当的人出现了

事情的起因是“介个”样子的,早上来到公司磨了点咖啡之后便拿着杯子找同事嘚瑟,同事还在被手上的项目搞得焦头烂额没空听我装逼。无奈之下,只能嘬着咖啡静静的看同事噼里啪啦的敲键盘。人都有个毛病,看自己总是看不清楚,找别人的毛病那是一找一个准。看着编辑器上逐渐成形的代码,我没有忍住我那“性感的樱桃小嘴”……

感觉自己萌萌哒

感觉自己萌萌哒

“大哥~你代码写的有点多啊,少写一点也能实现这个效果的。”眼前的这个被项目搞的懵圈的家伙听到我这句话后,当时就燃了。我抬头看了看四周,嗯不错,高手们都还没来,是时候进入装逼模式了。

高手们都走了就是我装逼的好时机

高手们都走了就是我装逼的好时机

开启老司机模式之后,同事直接给了我一个大写的“服”字。装逼完胜~事情如下:

发现了问题所在了么?我的CSS中的border没有声明border-color的颜色,只是单独声明了字体颜色color。可是我的写法和同事的写法所得到的结果却是一样的。

嘿嘿~知道老司机的厉害了吧,为什么会出现这种情况呢?说实话一般还真的有很少人注意到这点,很多知名网站上也有类似这样“重复声明”的CSS样式,我就不举例了。之前我也不知道为啥会这样。一次意外的错误让我发现了这个问题,开始研究这个问题并且我还幸运的找到了答案。下面我就开始传授给你们我这最强的“装逼绝学”。//心中默默念:“重复声明”的越频繁证明其基础知识越不扎实。例如overflow在一些网站上几乎每一级元素都会去声明一下。用烂了……

最强装逼绝学传授

最强装逼绝学传授

这一切源于一个神秘的家伙——CurrentColor,估计看到这个单词的第一眼就觉得怪怪的,很多人都不认识它,看到它的第一反应几乎都是“我擦类!CSS中有这货么?”。//包括文中的同事。我要告诉大家的是CSS中真有这货,用到的地方很少或者用到了没有意识到在用所以才会不认识。不认识没关系,互相介绍下打过几次交道就认识了。它是CSS3新增的关键字,IE9+及其他相应版本的现代浏览器才能正确识别它。

先来介绍这个看着很别扭的家伙,最后再来解释下文章开头事件的原因。循序渐进才是王道,让我们一点一点的把它的光环给“扒掉”。

根据字面的理解它代表的是“现在颜色”或是“当前颜色”,更为准确一点的去理解的话应该是“当前文字的颜色”。它的用法很简单咯。例如:

只要是需要使用颜色的地方都可以用关键字CurrentColor替换,使其保持和当前元素color属性的值一致。

currentcolor其实是变量

currentcolor其实是变量

由于color属性可以被继承,所以有的时候只需要在祖元素设置好color属性,其子元素和孙元素都可以使用currentcolor来调用祖元素的颜色。
currentcolor调用颜色

最终LESS编译之后渲染的结果如下图:

边框和盒阴影都调用了warp的颜色

边框和盒阴影都调用了warp的颜色

嘿嘿,这下可算是搞清楚这个奇怪而又陌生的家伙的作用了。但是为什么在元素设置字体颜色之后再去设置边框的话就不用去设置颜色了呢?//文章开头处的CSS代码。

回答这个问题我们要去Mozilla淘取一些知识点了。直接copy说明文档过来吧。

Initial value:

as each of the properties of the shorthand:

  • border-top-color: currentcolor
  • border-right-color: currentcolor
  • border-bottom-color: currentcolor
  • border-left-color:currentcolor

文档中说的很清楚,border-color这个属性的初始值(Initial value)就是currentcolor,初始值明白不?根本原因就是因为这个。

这一坨长长的英文字母比颜色值的字符数量要多,除了属性的默认值是它的,别的地方想要调用color颜色的属性值还要去写上“一坨”一点也不节省代码啊?前面只是简单的介绍了这货的本质,怎么更好的让它来为我们服务,还需要一定的技巧和灵感。//ps:box-shadow颜色的默认值也是这货。使用这货的时候某些浏览器可能会有BUG,只是道听途说,自己没有试验。

由以上所有文字我们可以总结出来几点。首先这货可以拿来装逼,其次这货能调用color的值,最后根据继承性的存在一旦在DOM节点设置color属性那么属于此节点的分支都可以用这货来调用color值。//说明的可能不准确,反正就是父元素子元素的意思。

具体展示这货威力的demo不详细介绍了,一时半会我也想不起来,只是直觉上感觉这货很定有相当搞头,字数也差不多了就这样吧,以后想起来了再来补上好了。

最后再啰嗦一句吧,移动终端的迅猛发展,让前端工作成为不可或缺的一部分,创意和设计最终都是依靠前端的工作来实现的,随着css3以及SVG等技术强大特性的显露,图形构建也会成为具有相当份量的存在,图形构建命题中如何控制图形状态的变化实是限制自身发展的掣肘因素之一,而currentcolor可以使其颜色和文本颜色一起变化的技术特性,等于减低了这种控制的部分技术难度。可以预见的是currentcolor独的的特性肯定会产生让人惊艳的结果,吃瓜围观ing……

不明真相的围观群众

(报告完毕!)
本文标签:标签:, ,