CSS currentColor研究

刚刚写了篇《CSS变量试玩儿》,我们了解到可以使用原生的CSS来定义使用变量,简化CSS书写、优化代码的组织与维护,但可怕的兼容性问题,又让我们望而却步、一笑了之。
但是有这么一个CSS变量currentColor,兼容良好、功能强大,接下来我们来一探究竟。

简介

CSS里已经有一个长期存在的兼容性良好的变量currentColor,表示对当前元素颜色的引用,可以应用在当前元素的其他属性和后代元素上。

h1 { 
    color: hsl(0,0%,44%); 
    padding: 1rem; 
    /* 这里调用默认颜色 */
    border-bottom: 4px solid; 
}
/* 使用currentColor,用在其他属性上 */
h1 { 
    color: hsl(0,0%,44%); 
    padding: 1rem; 
    /* 这里调用默认颜色 */
    border-bottom: currentColor 4px solid; 
}
/* 使用currentColor,用在后代元素上 */
a.blog{ 
  text-decoration: none;
  font-weight:bold;
}
/*设置不同状态颜色*/
a.blog           { color: #900; }
a.blog:hover,
a.blog:focus     { color: #990; }
a.blog:active    { color: #999; }
/*设置箭头*/
a.blog:after{
  width: 0;
    height: 0;
    border: 0.4em solid transparent;
    border-right: none;
    content: ‘‘;
    display: inline-block;
  position:relative;
  top:1px;
  left:2px;
}
/*设置箭头继承父对象颜色*/
a.blog::after,
a.blog:hover::after,
a.blog:focus::after,
a.blog:active::after
{
    border-left-color: currentColor;
}

我们可以发现,使用currentColor能够大大简化代码书写,优化代码的组织与维护。

实例

为了演示currentColor的应用,我们造了一个案例,参见codepen,大家可以-在线编辑-,-下载收藏-。我们在案例里尝试了currentColor和渐变的结合,和动画的结合,和伪对象元素的结合。
技术分享
html文件放上来,顺便弄点广告哈。
html文件

<h2 class="icon">Let‘s go to whqet‘s blog</h2>
<p>前端开发whqet,<a class="blog" href="http://blog.csdn.net/whqet/">王海庆的技术博客</a>,关注前端开发,分享相关资源,希望可以对您有所帮助。csdn专家博客http://blog.csdn.net/whqet和个人独立博客http://whqet.github.io同步更新,希望可以得到您的支持与肯定,您的支持是我最大的动力!王海庆,浙江邮电职业技术学院软件技术青椒一枚,其貌不扬、其名不翔,关心技术、热爱生活,我爱<a class="link" href="#">怒放的生命</a></p>

然后在CSS中,我们使用-prefix free不再用考虑复杂的浏览器厂商前缀。
这里使用本博文章《苹果风格的下划线》所述效果,利用渐变划线,然后利用text-shadow隔离线条,在渐变里面使用了currentColor.

/*使用googlefont*/
@import url(//fonts.googleapis.com/css?family=Cedarville+Cursive);
/*使用渐变划线,利用text-shadow隔离线条*/
h2.icon{
  margin:10px 0;
  display: inline-block;
  font-size:3em;
  width:auto;
  font-family:Cedarville Cursive;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;
  color: #000;
  background-image: linear-gradient( to right, currentColor 0%, #fff 120% );
  background-repeat: repeat-x;
  background-position: 0 75%;
  background-size: 100% 3px;
}

然后,我们探索将currentColor应用到:after元素中去,实现链接装饰元素的颜色与链接元素的绑定。

p{
  text-indent: 2em;
  line-height: 1.5em;
}
a.blog,a.link{ 
  text-decoration: none;
  font-weight:bold;
  position: relative;
  margin-right:4px;
}
/*应用到后代伪类元素*/
a.blog           { color: #900; }
a.blog:hover,
a.blog:focus     { color: #990; }
a.blog:active    { color: #999; }

a.blog::after{
  width: 0;
    height: 0;
    border: 0.4em solid transparent;
    border-right: none;
    content: ‘‘;
  position:absolute;
  right:-6px;
  top:2px;
}

a.blog::after,
a.blog:hover::after,
a.blog:focus::after,
a.blog:active::after
{
    border-left-color: currentColor;
}

应用到动画元素上的尝试。

/* 结合动画应用 */
a.link{ 
  color: #900; 
  animation:go 2s infinite;
}
a.link::before,
a.link::after{
  content: ‘‘;
  width:100%;
    height: 2px;
    background-color: currentColor;
    position:absolute;
  left:0;
}
a.link::before{
  top:-4px;
}
a.link::after{
  bottom:-4px;
}
@keyframes go{
  0% {color:#900}
  33%{color:#090}
  66%{color:#009}
}

深入

本文的写作过程大量参考了以下文章,大家可以仔细阅读下面文章获得更深的体会。

致谢

前端开发whqet,关注前端开发,分享相关资源。csdn专家博客,王海庆希望能对您有所帮助。
本文原文链接,http://blog.csdn.net/whqet/article/details/43761091
欢迎大家访问独立博客http://whqet.github.io

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。