Research on CSS currentColor

Research on CSS currentColor

I just wrote a CSS variable trial. We learned that native CSS can be used to define variables and simplify the organization and maintenance of CSS writing and code optimization, however, the terrible compatibility problem left us at a glance.
But there is such a CSS variable currentColor, which is well compatible and powerful. Let's look at it.

Introduction

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

H1 {color: hsl (44%,); padding: 1rem;/* call the default color here */border-bottom: 4px solid;}/* use currentColor, used in other properties */h1 {color: hsl (44%,); padding: 1rem;/* call the default color here */border-bottom: currentColor 4px solid ;} /* use currentColor for descendant elements */. blog {text-decoration: none; font-weight: bold;}/* set different status colors */. blog {color: #900;}. blog: hover,. blog: focus {color: #990;}. blog: active {color: #999;}/* Set arrow */. blog: after {width: 0; height: 0; border: 0.4em solid transparent; border-right: none; content: ''; display: inline-block; position: relative; top: 1px; left: 2px;}/* sets the arrow to inherit the color of the parent object */. blog: after,. blog: hover: after,. blog: focus: after,. blog: active: after {border-left-color: currentColor ;}

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

Instance

To demonstrate the currentColor application, we have created a case. For more information, see codepen. For more information, see online editing and download favorites -. In this case, we tried the combination of currentColor and gradient, and the combination of animation and pseudo object elements.

Put the html file up and get some advertisement by the way.
Html file

Let's go to whqet's blog
The front-end developer whqet, Wang haiqing's technical blog, pays attention to front-end development and shares related resources, hoping to help you. Csdn Expert Blog Tips! Wang haiqing, a green pepper of Software and Technology in Zhejiang Post and Telecommunications Vocational and Technical College, has a poor appearance and a poor name. He cares about technology and loves life. I love my angry life.

Then in CSS, we use-prefix free instead of complicated browser vendor prefixes.
Here we use the effect described in this blog article "Apple style underline", use the gradient dashes, and then use the text-shadow to isolate the lines. currentColor is used in the gradient.

/* Use googlefont */@ import url (// fonts.googleapis.com/css? Family = Cedarville + Cursive);/* use a gradient dashes and use text-shadow to isolate lines */h2.icon {margin: 10px 0; display: inline-block; font-size: 3em; width: auto; font-family: Cedarville Cursive; text-shadow: 2px 0 0 0 # fff,-2px 0 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 will 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;}. blog,. link {text-decoration: none; font-weight: bold; position: relative; margin-right: 4px;}/* apply the pseudo-class element to future generations */. blog {color: #900;}. blog: hover,. blog: focus {color: #990;}. blog: active {color: #999;}. blog: after {width: 0; height: 0; border: 0.4em solid transparent; border-right: none; content: ''; position: absolute; right:-6px; top: 2px;}. blog: after,. blog: hover: after,. blog: focus: after,. blog: active: after {border-left-color: currentColor ;}

An attempt to apply an animation element.

/* Combine the animation application */. link {color: #900; animation: go 2 s infinite;}. link: before,. link: after {content: ''; width: 100%; height: 2px; background-color: currentColor; position: absolute; left: 0;}. link: before {top:-4px;}. link: after {bottom:-4px;} @ keyframes go {0% {color: #900} 33% {color: #090} 66% {color: #009 }}

In-depth

The writing process in this article has made a lot of reference to the following articles. You can read the following articles to gain a deeper understanding.

CSS-Tricks article Zhang xinxu's wonderful W3C RefKeeping CSS short with currentColorform-controls-currentcolor-pseudo-elements thank you for your article

Front-end development whqet, focus on front-end development, and share related resources. Wang haiqing, A csdn Expert Blog, hopes to help you.
The original Article, http://blog.csdn.net/whqet/article/details/43761091
Welcome to independent blog http://whqet.github.io.