css value

Source of CSS values

First of all, we know that although CSS has simple syntax, it is not written blindly. Its properties and values ​​are officially defined, to be precise, they are defined by the browser manufacturer. of.

These given values ​​​​are nothing more than the following sources:

1. inherit means inheriting the value from the ancestor element. Every attribute has it.

2. initial represents the default value of the user agent. Every attribute has it.

3. Browser-specific values ​​usually have prefixes such as -ms-, -webkit-, etc., and some values ​​have no prefix.

4. Values ​​shared by browsers. Although they are shared, the implementation of each browser is not necessarily the same.

Therefore, it is certain that css compatibility issues are mostly caused by the inconsistency and evolution of css rendering implemented by browser manufacturers.

Values ​​in CSS specifications

The value finally presented to the user goes through 4 steps: first the specified value (the "specified value"), and then the inherited value (the " computed value"), then converted into the used value (the "used value"), and finally the actual value (the "actual value") obtained due to the limitations of the browser itself.

That is, specifies Value-->Calculated value-->Used value-->Actual value

Specified value

There are three possibilities for specifying the value. One is the default value of the user agent. That is, initial, one is the value written by the artist in the program, and the other is the value that is explicitly specified for inheritance, that is, inherit.

Normally, neither inherit nor initial need to be explicitly specified. But in some cases these 2 values ​​are very useful.

computed value

This is the value calculated by the rendering engine through parsing the CSS file and the inheritance relationship of the cascading rules before the document is formed.

used value

This is the value obtained after css is combined with html to form a document.

Understand that the difference between calculated values ​​and used values ​​is that the browser first parses the HTML and CSS files separately, and then merges them. Please refer to these 2 pictures for details.

webkit rendering process

Geoko rendering process

actual value

is the last browser available For example, all browsers cannot handle 7 decimal places, so the precision will be reduced.

These 4 values ​​​​are derived from the specification. Other browser implementations may not work according to this 4-step process, but currently mainstream browsers follow this process.

Note that the cascade is different In inheritance. Cascading is for individual CSS properties, inheritance is for elements. Layering often comes with weighting issues.

Chrome Developer

1. Specify value (3 types)

2. User agent default value (cannot be changed)

3. The value with an underscore indicates that it is overridden by the cascading rule, that is, the style is overwritten by the weighted one.

4. Click 4 to jump to the corresponding node and style view. The part below 4 indicates which element the style is inherited from. Usually you can see the ancestor DOM chain of the element from here.·

5. ##The gray part

   can be changed, Indicates that the rule is not available and is evaluated at runtime.

Example:

I now specify the height of h1 as follows

Look at the computed value and you can see that chrome retains it 4 digits after the decimal point:

View the used value (the reason for looking in this box is that the box represents the formation of a document, which corresponds to the previous used value)

The final actual value is here (view it directly on the page):

You can see that if there is padding, the padding will form the document Then add it to the visual width and height when displayed on the browser. Of course, it is different if the box-sizing attribute is specified, but you can know that this happens in the last step.

Source of CSS values

First of all, we know that although CSS has simple syntax, it is not written blindly. Its attributes and values ​​are Officially defined, to be precise, defined by the browser manufacturer.

These given values ​​​​are nothing more than the following sources:

1. inherit means inheriting the value from the ancestor element. Every attribute has it.

2. initial represents the default value of the user agent. Every attribute has it.

3. Browser-specific values ​​usually have prefixes such as -ms-, -webkit-, etc., and some values ​​have no prefix.

4. Values ​​shared by browsers. Although they are shared, the implementation of each browser is not necessarily the same.

Therefore, it is certain that css compatibility issues are mostly caused by the inconsistency and evolution of css rendering implemented by browser manufacturers.

Values ​​in CSS specifications

The value finally presented to the user goes through 4 steps: first the specified value (the "specified value"), and then the inherited value (the " computed value"), then converted into the used value (the "used value"), and finally the actual value (the "actual value") obtained due to the limitations of the browser itself.

That is, specifies Value-->Calculated value-->Used value-->Actual value

Specified value

There are three possibilities for specifying the value. One is the default value of the user agent. That is, initial, one is the value written by the artist in the program, and the other is the value that is explicitly specified for inheritance, that is, inherit.

Normally, neither inherit nor initial need to be explicitly specified. But in some cases these 2 values ​​are very useful.

computed value

This is the value calculated by the rendering engine through parsing the CSS file and the inheritance relationship of the cascading rules before the document is formed.

used value

This is the value obtained after css is combined with html to form a document.

Understand that the difference between calculated values ​​and used values ​​is that the browser first parses the HTML and CSS files separately, and then merges them. Please refer to these 2 pictures for details.

webkit rendering process

Geoko rendering process

actual value

is the last browser available For example, all browsers cannot handle 7 decimal places, so the precision will be reduced.

These 4 values ​​​​are derived from the specification. Other browser implementations may not work according to this 4-step process, but currently mainstream browsers follow this process.

Note that the cascade is different In inheritance. Cascading is for individual CSS properties, inheritance is for elements. Layering often comes with weighting issues.

Chrome Developer

1. Specify value (3 types)

2. User agent default value (cannot be changed)

3. The value with an underscore indicates that it is overridden by the cascading rule, that is, the style is overwritten by the weighted one.

4. Click 4 to jump to the corresponding node and style view. The part below 4 indicates which element the style is inherited from. Usually you can see the ancestor DOM chain of the element from here.·

5. ##The gray part

   can be changed, Indicates that the rule is not available and is evaluated at runtime.

Example:

I now specify the height of h1 as follows

Look at the computed value and you can see that chrome retains it 4 digits after the decimal point:

View the used value (the reason for looking in this box is that the box represents the formation of a document, which corresponds to the previous used value)

The final actual value is here (view it directly on the page):

You can see that if there is padding, the padding will form the document Then add it to the visual width and height when displayed on the browser. Of course, it is different if the box-sizing attribute is specified, but you can know that this happens in the last step.

For more css value related articles, please pay attention to the PHP Chinese website!