CSS property calculation process

Do you understand the property calculation process of CSS?

Some students may say that I know CSS properties, for example:

p{
  color : red;
}

In the above CSS code, p is the element selector, and color is one of the CSS properties.

But the calculation process of CSS properties is really not very clear.

It doesn't matter, through this article, you can fully understand what is the calculation process of CSS properties.

First of all, I don’t know if you have ever considered such a problem. Suppose there is such a piece of code in HTML:

<body>
  <h1>这是一个h1标题</h1>
</body>

The above code is also very simple. It just has an h1 title in the body. The appearance of the h1 title is as follows:

Currently, we have not set any style for this h1, but we can see that this h1 has certain default styles, such as default font size and default color.

So the question is, in addition to the default font size, default color and other attributes on our h1 element, what other attributes are there?

The answer is that the element will have all the CSS properties on it. You can open the developer panel of the browser, select [Element], switch to [Calculated Style], and then check [Show All]. At this time, you can see the values corresponding to all CSS properties on this h1.

In other words, any HTML element we write actually has a complete set of CSS styles . This often surprises beginners, because when we usually write CSS styles, we often only write the necessary parts, such as the previous:

p{
  color : red;
}

This often gives us the illusion that the p element only has the color attribute on it. The real situation is that any HTML element has a complete set of CSS styles, but if you don't have a written style, you will most likely use its default value. For example, in the picture above, no style is set for h1, and the default values are used for everything.

But note that what I emphasize here is "high probability". Is there still a situation where we "do not set a value, but do not use the default value"?

Well, it does, so I emphasize that you need to understand the "calculation process of CSS properties".

Generally speaking, the calculation process of attribute values is divided into the following four steps:

Determine the declared value
Cascading conflicts
Use inheritance
Use default value

Determine the declared value

The first step is to determine the declared value. The so-called declared value is the CSS style written by the author himself, such as the previous one:

p{
  color : red;
}

Here we declare that the p element is red, then this attribute setting will be applied.

Of course, in addition to author style sheets, general browsers will also have "user agent style sheets". To put it simply, the browser has a set of built-in style sheets.

In the above example, the color attribute is set in the author style sheet, and the user agent style sheet (the style sheet provided by the browser) sets attributes such as display, margin-block-start, margin-block-end, margin-inline- Values corresponding to attributes such as start and margin-inline-end.

There is currently no conflict between these values, so these attribute values will eventually be applied.

Cascading conflicts

When determining a declaration's value, a situation may arise where the declaration's style rules conflict.

At this point, you will enter the process of resolving cascading conflicts. This step can be broken down into the following three steps:

Importance of comparison sources
Compare priorities
comparison order

Come on, let's take a look step by step.

Importance of comparison sources

When different CSS style sources have the same declaration, which style rule is applied is determined based on the importance of the style sheet source.

So the question is, how many sources do our style sheets have?

Generally speaking, there are three sources:

The browser will have a basic style sheet to set the default style for any web page. These styles are collectively called user agent styles .
The author of a web page can define the style of the document. This is the most common style sheet, called the page author style .
Browser users can customize their experience using custom style sheets, called user styles .

The corresponding order of importance is: page author style > user style > user agent style

For a more detailed comparison of source importance, see MDN : CSS Cascading - CSS: Cascading Style Sheets | MDN

Let's look at an example.

For example, if there is an attribute conflict between the page author style sheet and the user agent style sheet , the author style sheet will take precedence.

p{
  color : red;
  display: inline-block;
}

It can be clearly seen that the display attribute settings that exist in the author style sheet and the user agent style sheet at the same time, the author style sheet finally eliminates the conflicting attributes in the user agent style sheet. This is the first step, deciding which source style to apply based on the importance of different sources.

Compare priorities

So next, what should I do if there are conflicting style declarations in the same source? At this point, a priority comparison of style declarations will be performed.

For example:

<div class="test">
  <h1>test</h1>
</div>
.test h1{
  font-size: 50px;
}

h1 {
  font-size: 20px;
}

In the above code, both belong to the page author style , and the importance of the source is the same. At this time, the weight of the selector will be used to compare the importance.

It's obvious that the upper selector has more weight than the lower selector, so the final title renders at 50px .

As you can see, the failed author style will be crossed out in Elements>Styles .

Students who are not sure about the calculation method of selector weight can enter this portal: Specificity - CSS: Cascading Style Sheets | MDN

comparison order

After going through the above two steps, most style declarations can be determined. But there is one last case left, that is, the style declaration has the same origin and the same weight.

At this point, the third step will be entered, comparing the order of style declarations.

for example:

h1 {
  font-size: 50px;
}

h1 {
  font-size: 20px;
}

In the above code, the page author styles are also the same , and the weight of the selector is also the same . At this time, the style statement located below will cascade the style statement above, and finally the attribute value of 20px will be applied.

At this point, all conflicts in the style declaration have been resolved.

Use inheritance

After the cascading conflict step is completed, the problem of which style rule should be applied when multiple style rules are declared for the same element is solved.

So what if there are no declared properties? Just use the default value at this time?

No, No, No , don't worry, there is a third step at this time, which is to use the inherited value.

For example:

<div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>
div {
  color: red;
}

In the above code, we set the color attribute value to red for the div, and we did not declare any attributes for the p element. However, since color is inheritable, the p element inherits the value of the color attribute from the nearest div. .

There are two points here that students need to pay attention to.

First of all, I emphasized that the first one is the nearest div element. See the example below:

<div class="test">
  <div>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>
div {
  color: red;
}
.test{
  color: blue;
}

Because this does not involve selecting the p element to declare the color value, but inheriting the value corresponding to color from the parent element, so whoever is closest here will listen. Beginners often get confused and compare weights, but here There is no weight comparison involved at all, because the p element is not selected at all.

The second is which attributes can be inherited?

Regarding this, you can easily check it on MDN. For example, let's take text-align as an example, as shown in the figure below:

Use default value

Okay, now that we have reached this point, if the attribute values cannot be determined, then the default value can only be used.

As shown below:

We have also said before that for an HTML element to be rendered in a browser, it must have all CSS attribute values, but we will not set most of them, and we will not set them in the user agent style sheet, nor can we It is obtained from inheritance, so the default value is used in the end.

Okay, that’s all there is to know about the CSS property calculation process.

an interview question

Okay, after learning today’s content, let me test your understanding with an interview question.

The following code, the final rendering effect, what color is the a element? What color is the p element?

<div>
  <a href="">test</a>
  <p>test</p>
</div>
div {
  color: red;
}

Can anyone tell me why such a result occurs?

The answer is as follows:

In fact, the reason is very simple, because the a element has already set the value corresponding to the color attribute in the user agent style sheet, so this declared value will be applied. In the p element, neither the author style sheet nor the user agent style sheet declares this attribute. However, since the color attribute is inheritable, the final color attribute value of the p element comes from the parent element through inheritance.