After writing CSS for so many years, initial and inherit as well as unset and revert are still silly and unclear?

I often come across and ask a CSS property, for example, how many values are there position

The usual answers are static , relative , absolute and fixed . Of course, there is another sticky that few people know about. In fact, in addition, CSS properties can usually set the following values:

• initial
• inherit
• unset
• revert

{
  position: initial;
  position: inherit;
  position: unset

  /* CSS Cascading and Inheritance Level 3 */
  position: revert;
}

Understanding the CSS styles of initial (default) and inherit (inherited) and the updated unset and revert are the keys to proficient use of CSS.

initial

initial keyword is used to set the CSS property to its default value, which can be applied to any CSS style. (IE does not support this keyword)

inherit

Each CSS property has a feature that is, this property must be inherited by default ( inherited: Yes ) or not inherited by default ( inherited: no ). We can MDN to determine whether a property is Inheritance characteristics.

For example, taking background-color as an example, as shown in the figure below, it shows that it does not inherit the background-color parent element:

Inheritable properties

Finally, list the attributes inherited: Yes

• All elements can be inherited: visibility and cursor
• Inline elements can be inherited: letter-spacing, word-spacing, white-space, line-height, color, font, font-family, font-size, font-style, font-variant, font-weight, text-decoration, text-transform, direction
• Block elements can be inherited: text-indent and text-align
• List elements can be inherited: list-style, list-style-type, list-style-position, list-style-image
• Table elements can be inherited: border-collapse

There are also some magical inherit here: 160ff6fb2d3f06 talk about some interesting CSS topics (4) - starting from reflection, talk about CSS inheritance , reasonable use of inherit can make our CSS code more in line with DRY ( Don''t Repeat Yourself) principle.

Here is a simple example, using inherit realize the image reflection function.

Use inherit realize the image reflection function

Given a div with the following background image:

<img src="https://user-images.githubusercontent.com/8554143/97248536-fc9a3100-183c-11eb-9647-1342776a583c.png" width="30%" height="30%">

Make the following reflection effect:

<img src="https://user-images.githubusercontent.com/8554143/97248665-379c6480-183d-11eb-80a7-241ad9fed4c0.png" width="50%" height="50%">

There are many ways, but of course we have to find the fastest and most convenient way, at least no matter how the picture changes, div size of 060ff6fb2d3fe4 changes, we don’t need to change our code.

You can use -webkit-box-reflect specifically for making mirror images. Of course, another clever way is to use the inherit keyword.

We add a pseudo element to the image container, and use background-image: inherit inherit the background image value of the parent value, so that no matter how the image changes, our CSS code does not need to be changed:

div::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background-image: inherit;
    transform: rotateX(180deg);;
}

We use the pseudo element background-image: inherit; inherit the background image of the parent element, and then use transform to rotate the container to achieve the reflection effect. The results are as follows:

<img src="https://user-images.githubusercontent.com/8554143/97248665-379c6480-183d-11eb-80a7-241ad9fed4c0.png" width="50%" height="50%">

CodePen Demo - Use inherit to realize the image reflection function .

unset

As the name implies, we can simply understand that the keyword unset In fact, it is a combination initial and inherit

What does that mean? That is, when we set unset to a CSS property:

1. If the attribute is the default inherited attribute, the value is equivalent to inherit
2. If the attribute is a non-inherited attribute, the value is equivalent to initial

For example, let's first list some properties in CSS that inherit the parent style by default:

• Partially inheritable styles: font-size , font-family , color , text-indent
• Partially non-inheritable styles: border , padding , margin , width , height

Use unset inherit the parent style:

Take a look at this simple structure:

<div class="father">
    <div class="children">子级元素一</div>
    <div class="children unset">子级元素二</div>
</div>

.father {
    color: red;
    border: 1px solid black;
}

.children {
    color: green;
    border: 1px solid blue;
}

.unset {
    color: unset;
    border: unset;
}

1. Since color is inheritable style, we set color: unset elements, the final performance for the parent of color red .
2. Since border is not inherited style, set border: unset elements, the final performance of border: initial , which is the default border style, no border.

CodePen Demo -- unset Demo;

Some magical unset

For example, in the following situation, there are two similarly structured position: fixed positioning elements on our page.

The difference is that one of them is top:0; left: 0; and the other is top:0; right: 0; . The other styles are the same.

Suppose the style structure is as follows:

<div class="container">
    <div class="left">fixed-left</div>
    <div class="right">fixed-right</div>
</div>

Generally speaking, the style is as follows:

.left,
.right {
    position: fixed;
    top: 0;    
    ...
}
.left {
    left: 0;
}
.right {
    right: 0;
}

The method of using unset:

.left,
.right {
    position: fixed;
    top: 0;    
    left: 0;
    ...
}
.right {
    left: unset;
    right: 0;
}

CodePen Demo -- unset Demo;

revert

revert is a newer keyword. It is derived from CSS Cascading and Inheritance Level 3 (CSS Cascading 3) , which directly translates to the meaning - restoration.

It is very similar to the keyword unset . In most cases, their functions are exactly the same! The only difference is:

• revert : After the value is applied to the attribute, it will be restored to the value set by the browser or the custom style sheet (set on the browser side) created by the browser or the user
• unset : After applying this value to the property, the style will be completely restored

The difference between unset and revert

It may be a bit unset revert 's take a look at the similarities and differences between 060ff6fb2d46b7 and 060ff6fb2d46b9 through an actual DEMO:

<div class="father">
    <b class="color unset">设置了 unset，我的 font-weight 会被完全清除</b>
    <br>
    <b class="color revert">设置了 revert，我的 font-weight 将会被还原到浏览器默认样式的 font-weight: bold;</b>
</div>

.unset {
    font-weight: unset;
}

.revert {
    font-weight: revert;
}

Of course, there is a premise here. The browser I currently test (Chrome 92.0.4515.107) has set the default browser user agent style <b>

The actual effect of the above code:

CodePen Demo -- Difference between revert and unset keyword in CSS

To sum up, understanding the CSS styles initial (default) and inherit (inherited) and the newer unset and revert are the keys to proficient use of CSS.

Although it's a bit convoluted, after mastering it, it has magical effects in many small places. Flexible use makes your code more streamlined.

at last

Okay, this concludes this article, I hope it helps you :)

If you want to get the most interesting CSS information, don’t miss my public - 160ff6fb2d4803 iCSS front-end facts 160ff6fb2d4805 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.