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. 从0开始搭建SQL Server AlwaysOn 第二篇（配置故障转移集群）
			
    从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...
    
			
    2. 
						
  2. ASP.NET Core 之 Identity 入门（二）
			
    前言 在 上篇文章 中讲了关于 Identity 需要了解的单词以及相对应的几个知识点,并且知道了Identity处在整个登入流程中的位置,本篇主要是在 .NET 整个认证系统中比较重要的一个环节,就 ...
    
			
    3. 
						
  3. Carousel 旋转画廊特效的疑难杂症
			
    疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...
    
			
    4. 
						
  4. Chrome V8引擎系列随笔 (1)：Math.Random()函数概览
			
    先让大家来看一幅图,这幅图是V8引擎4.7版本和4.9版本Math.Random()函数的值的分布图,我可以这么理解 .从下图中,也许你会认为这是个二维码?其实这幅图告诉我们一个道理,第二张图的点的分 ...
    
			
    5. 
						
  5. C#使用GET、POST请求获取结果
			
    C#使用GET.POST请求获取结果,这里以一个简单的用户登陆为例. 1. 使用GET请求获取结果 1.1 创建LoginHandler.aspx处理页面 protected void Page_Lo ...
    
			
    6. 
						
  6. java.IO输入输出流：过滤流：buffer流和data流
			
    java.io使用了适配器模式装饰模式等设计模式来解决字符流的套接和输入输出问题. 字节流只能一次处理一个字节,为了更方便的操作数据,便加入了套接流. 问题引入:缓冲流为什么比普通的文件字节流效率高? ...
    
			
    7. 
						
  7. 从贝叶斯到粒子滤波——Round 1
			
    粒子滤波确实是一个挺复杂的东西,从接触粒子滤波到现在半个多月,博主哦勒哇看了N多篇文章,查略了嗨多资料,很多内容都是看了又看,细细斟酌.今日,便在这里验证一下自己的修炼成果,请各位英雄好汉多多指教.  ...
    
			
    8. 
						
  8. 在Linux（Ubuntu/openSUSE/CentOS）下配置ASP.NET（Apache + Mono）
			
    [题外话] 闲的无聊竟然想尝试测试自己做的项目在不同操作系统上的性能表现,所以决定试试在Linux上部署Apache和Mono的环境.由于平时很少接触Linux,所以从网上找了几篇文章(附在相关链接中 ...
    
			
    9. 
						
  9. Linux.NET学习手记（8）
			
    上一回合中,我们讲解了Linux.NET面对OWIN需要做出的准备,以及介绍了如何将两个支持OWIN协议的框架:SignalR以及NancyFX以OwinHost的方式部署到Linux.NET当中.这 ...
    
			
    10. 
						
  10. 深入浅出聊优化：从Draw Calls到GC
			
    前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...
    
			
    11.