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

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


战场原黑仪

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

感觉自己萌萌哒

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

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

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

/*同事的css*/
.active{
  color:#C60;
  border:thin  solid  #C60;
}

/*我的CSS*/
.active{
  color:#C60;
  border:thin  solid;
}

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

嘿嘿~知道老司机的厉害了吧,为什么会出现这种情况呢?说实话一般还真的有很少人注意到这点,很多知名网站上也有类似这样“重复声明”的CSS样式,我就不举例了。之前我也不知道为啥会这样。一次意外的错误让我发现了这个问题,开始研究这个问题并且我还幸运的找到了答案。

下面我就开始传授给你们我这最强的“装逼绝学”。//心中默默念:“重复声明”的越频繁证明其基础知识越不扎实。例如overflow在一些网站上几乎每一级元素都会去声明一下。用烂了……

最强装逼绝学传授

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

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

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

/*CurrentColor Demo Css*/
.ClassName {border:thin  solid  CurrentColor  }
#IdName {  background-color:CurrentColor;}  //这个会让文字显示不出来
.ClassName{box-shadow:2px  2px  3px  CurrentColor;  }

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

currentcolor其实是变量

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

currentcolor调用颜色

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

边框和盒阴影都调用了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……

不明真相的围观群众
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,402评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,691评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,279评论 0 11
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,630评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 922评论 0 1