CSS中存在一个神秘的变量，少有人知自然也不怎么为人所用。它就是crrentColor变量（或者说是CSS关键字，但我觉得称为变量好理解些）。

初识

它是何物？具有怎样的功效？它从哪里来？带着这些疑问我们继续。

下面是来自MDN的解释：

currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。

你这可以这么理解，CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。

到此似乎解决了上面三个哲学式的提问，但依然有些模糊。程序员之间的交流，还是上码才好。

  • 场景1
<p>约么？</p>


p{

    color: red;

}

此时，<p>标签currentColor的值为red。

  • 场景2
<div class="container">

    <p>约么？</p>

</div>


.container{

    color: #00ff00;

}

现在，我们没有给<p>标签指定颜色，它的color从父级容器也就是class为container的div继承而来，换句话说此时p标签的color为#00ff00，currentColor又是直接去取元素的color值，所以此时p标签的currentColor值也为#00ff00。

  • 场景3

如果父级元素也没有写color呢？其实这里都还是CSS规则的范畴，跟本文的主角关系不太大。但本着不啰嗦会死的原则，就展开了讲。

如果父级元素也没有指定颜色，那它的父级元素就会从父级的父级去继承，直到文档的根结点html标签都还没显示指定一个颜色呢，就应用上浏览器默认的颜色呗~

<!doctype html>

<html>

    <head>

        <title>我来组成头部</title>

    </head>

    <body>

        <p>约么？</p>

    </body>

    <footer>战神金钢，宇宙的保护神！</footer>

</html>


/**

 * 无CSS

 */

那，这个时候的黑色其实是浏览器默认给的。此时p标签的currentColor自然也跟color值一样，为黑色，纯黑的#000。

如何用？

了解它是怎样的物品后，下面问题来了，如何用？有额外的buff效果么，耗蓝多么，CD时间长么。。。

前面说道，它就是一个CSS变量，存储了颜色值，这个值来自当前元素的colorCSS属性。当你需要为该元素其他属性指定颜色的时候，它就可以登上舞台了。

<div class="container">

    好好说话，有话好好说

</div>


.container{

    color: #3CAADB;

    border: 4px solid currentColor;

}




这里我们第一次领略了currentColor的奇效。在指定边框颜色的时候，我们直接使用currentColor变量，而没有写一个传统的颜色值。


你似乎也知道了该如何用了。不只是border，其他能够使用颜色的地方，比如background，box-shadow等等。


带你装逼带你飞


新技能就是如此炫酷。大开脑洞任性地去使用吧！


与渐变混搭


你可能无法想象到的是，除了可以将currentColor用到普通需要颜色的场景，它同样可以被用在渐变中。


<div class="container">

</div>




.container{

  height:200px;

  color: #3CAADB;

  background-image: linear-gradient(to right, #fff, currentColor 100%);

}






甚至也可用于填充svg，下面会有相应示例。


与CSS动画结合


当与CSS animation结合，可以得到更加有创意的效果，比如这个来自codepen的示例


See the Pen currentColor by Scott Kellum (@scottkellum) on CodePen.


更加简洁的CSS


其实，新技能不只是装逼那么单纯，合理的使用currentColor 变量会让你的CSS代码变得简洁。这才是我们想要达到的目的。以炫技为目的技能是没有生产意义的。


看下面这个例子（这个示例灵感来自这里）




我们在按钮中使用了一个svg图标。你是一个负责任的FE，所以，对这个按钮的各种状态:focus，:hover，:active都作了样式上的处理。同时，为了让图标也跟着保持一致的姿态变更，需要把对<a>标签的样式处理同样就到到<svg>标签上。于是你的CSS代码看起来就是下面这样的了。


/*a 标签*/

.button {

    color: #117B6F;

    font-size: 1.2em;

}

.button:hover, .button:focus {

    color: #01B19A;

}

.button:active {

    color: #02D7BB;

}

/*svg 标签*/

.button svg {

    height: 17px;

    width: 17px;

    fill: #117B6F;

}

.button:hover svg, .button:focus svg {

    fill: #01B19A;

}

.button:active svg {

    fill: #02D7BB;

}






你也发现了，代码有点冗余。接下来，我们用currentColor来将它简化一下。于是成了下面这样：


/*a 标签*/

.button {

    color: #117B6F;

    font-size: 1.2em;

}

.button:hover, .button:focus {

    color: #01B19A;

}

.button:active {

    color: #02D7BB;

}

/*svg 标签*/

.button svg {

    height: 17px;

    width: 17px;

    fill: currentColor;

}






更好维护的CSS


仔细想想不难发现，当使用currentColor后，我们的CSS也变得更加好维护了。


还拿上面的按钮示例来说，优化之前不但代码冗余，而且哪天PM来劲了说这颜色饱看，给换个其他色。于是你得把<a>标签和<svg>一起换了。


但优化后就不一样了，因为<svg>使用的填充是currentColor，你只需要改变<a>标签的颜色，它也就跟着变了。真正做到了牵一发而不动全身。这不正是众码友们毕生所追求的理想编程境界么。


浏览器兼容性


一提到浏览器兼容性，FE同学们或许就不敢那么任性了。之前你可能是这样的：




当听到IE传来的噩耗，你可能是这样的：




经查，can i use 没有关于它的数据。


经测，


  • 本机Win7搭载的IE8不支持
    • 

  • 本机安装的火狐31发来战报表示支持
    • 

  • Chrome，你猜？
    • 

  • 本机Safari 5.1.7也表示支持
    • 

  • 本机Opera 26 同样表示支持


根据这篇文章的描述，它是可以很好地工作在在所有现代浏览器和IE9+上的，甚至是各浏览器对应的移动版本。所以，在IE不是主要客户对象的情况下，还是可以放心使用的。


参考

												


											
CSS currentColor 变量的使用的更多相关文章
	

    
								
  1. CSS currentColor 变量
		
    ㈠currentColor定义及理解 来自MDN的解释:currentColor代表了当前元素被应用上的color颜色值. 使用它可以将当前这个颜色值应用到其他属性上,或者嵌套元素的其他属性上. 你这 ...
    
		
    2. 
						
  2. css - 原生变量及使用函数 var()
		
    零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过  --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...
    
		
    3. 
						
  3. CSS currentColor研究
		
    刚刚写了篇<CSS变量试玩儿>,我们了解到可以使用原生的CSS来定义使用变量,简化CSS书写.优化代码的组织与维护,但可怕的兼容性问题,又让我们望而却步.一笑了之. 但是有这么一个CSS变 ...
    
		
    4. 
						
  4. 原生css 中变量的使用
		
    前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明  ...
    
		
    5. 
						
  5. css原生变量var()
		
    了解css/css3原生变量var 阮一峰css变量教程 深入学习css自定义属性(css变量)
    
		
    6. 
						
  6. css原生变量 var
		
    css 变量的支持情况: 在pc端支持还不错,ie不支持,移动端也不支持,大概这就是css变量没有广泛使用的原因吧 CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量,方便代码 ...
    
		
    7. 
						
  7. css的变量教程,更强大的css
		
    当微软宣布 Edge 浏览器将支持 CSS 变量.这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 声明变量的时 ...
    
		
    8. 
						
  8. css定义变量_css原生变量的使用和兼容 附带还有更高性能，文件更高压缩率的好处
		
    在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本.我们需要使用CSS预编译工具[Sass/Less/Stylus],随着这些工具的流行,CSS变量也开始规范制定,目前很多 ...
    
		
    9. 
						
  9. CSS变量（自定义属性）实践指南
		
    本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 日期格式代码出现两次的错误 ORA-01810
			
    错误的原因是使用了两次MM . 一.Oracle中使用to_date()时格式化日期需要注意格式码 如:select to_date('2005-01-01 11:11:21','yyyy-MM-dd ...
    
			
    2. 
						
  2. 【疯狂造轮子-iOS】JSON转Model系列之二
			
    [疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...
    
			
    3. 
						
  3. 支持 .NET Core 的 Memcached 客户端 EnyimMemcachedCore
			
    1. 介绍 EnyimMemcachedCore 是一个支持 .NET Core 的 Memcached 客户端,是从 EnyimMemcached 迁移至 .NET Core的,源代码托管在 Git ...
    
			
    4. 
						
  4. 在传统.NET Framework 上运行ASP.NET Core项目
			
    新的项目我们想用ASP.NET Core来开发,但是苦于我们历史的遗产很多,比如<使用 JavaScriptService 在.NET Core 里实现DES加密算法>,我们要估计等到.N ...
    
			
    5. 
						
  5. BootStrap_02之全局样式及组件
			
    1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...
    
			
    6. 
						
  6. jQuery学习之路（2）-DOM操作
			
    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
    
			
    7. 
						
  7. XML技术之DOM4J解析器
			
    由于DOM技术的解析,存在很多缺陷,比如内存溢出,解析速度慢等问题,所以就出现了DOM4J解析技术,DOM4J技术的出现大大改进了DOM解析技术的缺陷. 使用DOM4J技术解析XML文件的步骤? pu ...
    
			
    8. 
						
  8. 浅谈Java的throw与throws
			
    转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...
    
			
    9. 
						
  9. Maven多模块，Dubbo分布式服务框架，SpringMVC，前后端分离项目，基础搭建，搭建过程出现的问题
			
    现互联网公司后端架构常用到Spring+SpringMVC+MyBatis,通过Maven来构建.通过学习,我已经掌握了基本的搭建过程,写下基础文章为而后的深入学习奠定基础. 首先说一下这篇文章的主要 ...
    
			
    10. 
						
  10. 设计模式之工厂模式VS抽象工厂
			
    一.工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. 工厂模式在<Java与模式>中分为三类:1)简单工厂模式(Simple Factor ...
    
			
    11.