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. react-router 组件式配置与对象式配置小区别
			
    1. react-router 对象式配置 和 组件式配置    组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...
    
			
    2. 
						
  2. 用php做注册审核
			
    做注册审核就像前面讲的注册登录一样,也是要连接数据库 首先在数据库内要做这样一张表: 表名为users表 里面的列名分别为用户名,密码,姓名,性别,生日,账户的状态,照片 然后就可以写代码了,要注册的 ...
    
			
    3. 
						
  3. ABP源码分析一：整体项目结构及目录
			
    ABP是一套非常优秀的web应用程序架构,适合用来搭建集中式架构的web应用程序. 整个Abp的Infrastructure是以Abp这个package为核心模块(core)+15个模块(module ...
    
			
    4. 
						
  4. SSH实战  ·  用spring框架下的hibernatetemplate的get方法出现的问题
			
    用get方法查询:      return this.getHibernateTemplate().get(Product.class, pid); 出现错误为:id to load is requi ...
    
			
    5. 
						
  5. ASP.NET Core应用中如何记录和查看日志
			
    日志记录不仅对于我们开发的应用,还是对于ASP.NET Core框架功能都是一项非常重要的功能特性.我们知道ASP.NET Core使用的是一个极具扩展性的日志系统,该系统由Logger.Logger ...
    
			
    6. 
						
  6. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
			
    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
    
			
    7. 
						
  7. 从零开始编写自己的C#框架（25）——网站部署
			
    导航 1.关掉访问保护 2.发布网站 3.复制网站到服务器 4.添加新网站 5.设置网站访问权限 6.设置文件夹访问权限 7.控制可更新文件夹执行权限 8.设置“应用程序池”.net版本与模式 9.附 ...
    
			
    8. 
						
  8. Xamarin+Prism开发详解三：Visual studio 2017 RC初体验
			
    Visual studio 2017 RC出来一段时间了,最近有时间就想安装试试,随带分享一下安装使用体验. 1,卸载visual studio 2015 虽然可以同时安装visual studio  ...
    
			
    9. 
						
  9. ES6的一些常用特性
			
    由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...
    
			
    10. 
						
  10. C++内联函数
			
    在C语言中,我们使用宏定义函数这种借助编译器的优化技术来减少程序的执行时间,那么在C++中有没有相同的技术或者更好的实现方法呢?答案是有的,那就是内联函数.内联函数作为编译器优化手段的一种技术,在降低 ...
    
			
    11.