CSS currentColor 变量的使用
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 变量的使用的更多相关文章
- CSS currentColor 变量
㈠currentColor定义及理解 来自MDN的解释:currentColor代表了当前元素被应用上的color颜色值. 使用它可以将当前这个颜色值应用到其他属性上,或者嵌套元素的其他属性上. 你这 ...
- css - 原生变量及使用函数 var()
零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过 --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...
- CSS currentColor研究
刚刚写了篇<CSS变量试玩儿>,我们了解到可以使用原生的CSS来定义使用变量,简化CSS书写.优化代码的组织与维护,但可怕的兼容性问题,又让我们望而却步.一笑了之. 但是有这么一个CSS变 ...
- 原生css 中变量的使用
前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 ...
- css原生变量var()
了解css/css3原生变量var 阮一峰css变量教程 深入学习css自定义属性(css变量)
- css原生变量 var
css 变量的支持情况: 在pc端支持还不错,ie不支持,移动端也不支持,大概这就是css变量没有广泛使用的原因吧 CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量,方便代码 ...
- css的变量教程,更强大的css
当微软宣布 Edge 浏览器将支持 CSS 变量.这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 声明变量的时 ...
- css定义变量_css原生变量的使用和兼容 附带还有更高性能，文件更高压缩率的好处
在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本.我们需要使用CSS预编译工具[Sass/Less/Stylus],随着这些工具的流行,CSS变量也开始规范制定,目前很多 ...
- CSS变量（自定义属性）实践指南
本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...
随机推荐
- C++中的事件分发
本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...
- 结巴分词3--基于汉字成词能力的HMM模型识别未登录词
作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 1 算法简介 在 结巴分词2--基于前缀词典及动态规划实现分词 博 ...
- PHP之GD函数的使用
本文讲解常用GD函数的应用 1.一个简单的图像 我们先看一个例子: <?php $w = 200; $h = 200; $img = imagecreatetruecolor($w,$h); $ ...
- IOS FMDB 获取数据库表和表中的数据
ios开发中,经常会用到数据库sqlite的知识,除了增,删,改,查之外,我们说说如何获取数据库中有多少表和表相关的内容. 前言 跟数据库使用相关的一般的增删改查的语句,这里就不做解释了.在网上有很多 ...
- springmvc+bootstrap+jquerymobile完整搭建案例(提供下载地址)
用一张简单的截图说明下,然后提供一个下载地址. bootstrap的大部分样式官方都是写好的,所以只需要class="官方样式即可",具体可以看官方的案例,下面来个地址 http: ...
- (转)从0开始搭建SQL Server AlwaysOn 第二篇（配置故障转移集群）
原文地址: http://www.cnblogs.com/lyhabc/p/4682028.html 这一篇是从0开始搭建SQL Server AlwaysOn 的第二篇,主要讲述如何搭建故障转移集 ...
- Redis配置文件redis.conf
1.地址 2.Units单位 1 配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit 2 对大小写不敏感 3.includes包含
- windows 7（32/64位）GHO安装指南（U盘引导篇）~
上一篇我们说了怎么制作U盘启动盘,那么这一篇让我们来看看如何进行正确的U盘引导启动. 现在的个人计算机一般分为台式机和笔记本,由于各厂商的喜好不同(开玩笑的啦),所以对于主板的BIOS设置各所不同.进 ...
- BZOJ 3110: [Zjoi2013]K大数查询 [树套树]
3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 6050 Solved: 2007[Submit][Sta ...
- Maven实战：pom.xml与settings.xml
pom.xml与settings.xml pom.xml与setting.xml,可以说是Maven中最重要的两个配置文件,决定了Maven的核心功能,虽然之前的文章零零碎碎有提到过pom.xml和s ...