CSS Variables and inherited learning notes

Friends, Bai front-end architect CSS Magic "Secrets of the CSS", has been published, and presented a copy of me. After looking at this book, there are many CSS tips. So you will have a big harvest, here to help him publicize it! Today's case, but also part of the reference to this book. Talk to you today about CSS variables and inheritance!

Some people will say, how can CSS have variables and inheritance? You mean the CSS processor!

No, I am talking about pure CSS, in fact, CSS is also trying to integrate the characteristics of various preprocessor and writing, and even some properties than the preprocessor more powerful, such as:

Less gossip, let's cut to the chase!

CSS variables

In fact, I said variables, not the CSS processor in the custom variables, but CSS some properties have similar variables function!

This property is CurrentColor.

The application of CurrentColor

1, hollowing out the picture and CurrentColor

The code is as follows:

. Icon {
Display:inline-block;
width:16px; height:20px;
Background-image:url (h/216/0y89gzo2/sprite_icons.png);
Background-color:currentcolor; /* The Color control icon Color * *
}
. link:hover {color: #333;} /* Although the change is the text color, but the icon color changes together.

Explanation: The default icon background color CurrentColor with the link's color, link color changes, the icon's background color also changes with!

2, horizontal split line and text color consistency, if all of your HR color and text color consistency, with CurrentColor, you can write as follows

Hr{height:.5em;background:currentcolor}

If your text color changes, HR will also change automatically.

CSS Inheritance

Inheritance we're using the Inherit attribute.

This application to the time quite a lot, such as setting the font, the form of the font we want to be the same as the rest of the page, we do not have to repeat, as long as the inheritance of other can!

Input,select,button{font:inherit}

The hyperlink color is the same as any other color and can be used:

A{color:inherit}

Prompt dialog box with small arrows, to and Overall dialog box all the time, including borders and backgrounds, we can use inherit

About the dialog box, I also have the previous article on the CSS Writing dialog box, but this style of dialog box for the border is difficult to control, look at the following application bar!

The code is as follows:

. Callout{position:relative;width:300px;height:200px;background-color: #ccc; border:1px solid red;
. Callout::before{content: "";p Osition:absolute;top:-.4em;left:1em;padding:.35em;background:inherit;
Border:inherit;border-right:0;border-bottom:0;transform:rotate (45deg);} First write a square, then rotate 45 degrees into a triangle

Example

: root {--color:blue;}
div {--color:green;}
#alert {--color:red;}
* {Color:var (--color);}

<p>i inherited blue from the root element!</p>
<div>i got green set directly on me!</div>
<div id= ' alert ' >
While I got red set directly on me!
<p>i ' M red too, because of inheritance!</p>
</div>

Background and border inheritance callout, this is more convenient to write!