CSS currentColor研究_html/css_WEB-ITnose

I just wrote an article "CSS Variable Trial". We learned that you can use native CSS to define variables, simplify CSS writing, and optimize code organization and maintenance, but the compatibility is terrible The problem again makes us shy away and laugh it off.
But there is such a CSS variable currentColor, which is well compatible and powerful. Let’s find out next.

Introduction

There is already a long-standing variable currentColor in CSS with good compatibility, which represents a reference to the color of the current element and can be applied to other attributes of the current element and descendant elements.

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; }

We can find that using currentColor can greatly simplify code writing and optimize code organization and maintenance.

Example

In order to demonstrate the application of currentColor, we created a case, see codepen, you can - edit online -, - download collection -. In the case, we tried the combination of currentColor with gradient, animation, and pseudo-object elements.

Upload the html file and add some ads.
html file

<h2 id="Let-s-go-to-whqet-s-blog">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>

Then in CSS, we use -prefix free and no longer need to consider the complicated browser manufacturer prefix.
Here we use the effect described in this blog article "Apple-style Underline", use gradient to draw lines, then use text-shadow to isolate the lines, and use currentColor in the gradient.

/*使用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; }

Then, we Explore applying currentColor to the :after element to bind the color of the link decoration element to the link element.

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; }

An attempt to apply it to animated elements.

/* 结合动画应用 */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}}

Go deeper

The writing process of this article relied heavily on the following articles. You can read the following articles carefully to gain a deeper understanding.

CSS-Tricks article

Zhang Xinxu’s wonderful article

W3C Ref

Keeping CSS short with currentColor

form-controls-currentcolor -pseudo-elements

Liu Wayong’s article

Acknowledgments