Understand the use of CSS3's all attribute

1. Compatibility

As shown below:

The compatibility is okay. Except for IE, other browsers are basically green. I can use it for my own entertainment and intranet projects.

2. What is all used for?

The all attribute is actually an abbreviation of all CSS properties, which means that all CSS properties are like this or that, but the two CSS properties unicode-bidi and direction are not included.

Why does this CSS property exist?

We may know that some CSS property values ​​are basically common to all CSS properties, such as inheritance!

When we use CSS reset input box, is there code similar to this (it may actually be a specific value with similar effect):

input, textarea {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}

Because this type of input control has its own built-in size and font, it needs to be reset.

At this point, you will find that these attribute values ​​are all inherited. It would be great if they could be merged!

The CSS all property is used for merging.

input, textarea { 
   all: inherit; 
}

This is just for demonstration purposes. It is not actually used this way, because all:inherit will make the background color and other things inherit from the parent, which I believe is not what you want to see.

3. Grammar and distinction

The syntax is as follows:

all: initial;
all: inherit;
all: unset;

/* CSS4 features, ignore */
all: revert;

The default HTML and CSS look like this, a traditional tag content with a title and a list:

<article>
    <h6>Title</h6>
    <p>p changes to text</p>
    <ol>
        <li>Ordered list 1</li>
        <li>Ordered List 2</li>
        <li>Ordered list 3</li>
    </ol>
    <textarea>Text area</textarea>
</article>
article {
    background-color: #f0f3f9;
    color: green;
}
article > textarea {
    border: 1px solid #34538b;
    background-color: #ffffe0;
    color: red;
}

As you can see:

The colors, spacing, and state of the text fields are what we think they should look like.

Now, click the drop-down of demo and select the corresponding all attribute value to achieve the following CSS effect:

.initial > * {
    all: initial;
}
.inherit > * {
    all: inherit;
}
.unset > * {
    all: unset;
}

result:

Initial means the initial value, that is, all first-level child elements under the article element use the initial value of CSS except unicode-bidi and direction.

For example, the <h6> and <p> elements do not have the built-in display:block feature in the browser, and are now inline elements, so they are displayed in one line:

The font-size also uses the size of 16px set by the browser software itself, and the color also becomes black, which is the default setting of the browser software itself. For example, change the font size in your browser settings from medium to large:

You will see that the displayed text content has also become larger:

Since we only made initial settings for the adjacent level child elements, the <li> element is not affected. However, since the default setting for the <li> element is dots when the parent element is unknown, the numbers here are changed to dots, and both list-style-type and list-style-position are changed.

Inherit means inheritance, that is, all adjacent child elements under the article element inherit the CSS of the <article> element except unicode-bidi and direction.

Therefore, the <h6> and <p> elements are still block-shaped, the background-color is the background color of the <article> element, and the color is the same as <article>, which is green (the red color of the text area is removed).

Not only the above CSS, but also padding/margin are inherited, but the default is 0, which is not obvious. Let's modify it slightly, for example, give the <article> element a margin value:

As a result, those child elements all blossomed:

unset

Unset means to cancel the setting, that is, all the CSS of the adjacent child elements under the article element except unicode-bidi and direction are removed. What should we use if we don’t want them? The characteristics of the unset value are as follows: the CSS set by the current element browser or user is ignored, and if it is a CSS with inherited characteristics, such as color, the inherited value is used; if it is a CSS property without inherited characteristics, such as background-color, the initial value is used.

Therefore, the display attribute value of the <h6> and <p> elements uses the initial value, so they become inline elements and are displayed in the same line. The color of these elements uses the inherit value, so they are all green. The background color of <textarea> does not have the inheritance feature, so the initial value is used, that is, transparent. Therefore, the effect is shown in the screenshot.

at last

There is so much CSS involved in all that I still can’t think of any scenario where I would need to use this CSS property. Or when you want a special element to become a normal element all of a sudden, for example, a div outside an input box, and input{all:inherit;}, it seems that there is such a scenario, the input box does not need border, background, padding, or margin.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.