Computed Values: More Than Meets the Eye

Front-end developers cannot do without browser developer tools. This article will dive into the Compute tab in the developer tool. Although it is inconspicuous, it can reveal many important information, such as how relative CSS values ​​are parsed. We will also learn how inheritance works in the browser's style calculation process.

The content in the Compute tab is crucial because it shows the value the browser actually uses to render the website . If the style of the element does not match expectations, the Calculation tab can help you understand why.

If you are used to using the Styles tab (called Rules in Firefox), you might be wondering how it differs from the Calculation tab. They all show the styles applied to the element. The answer is: The Calculate tab displays a list of parsed styles arranged alphabetically, including the styles declared in the style sheet, the inherited styles, and the browser's default styles.

The Styles tab, on the other hand, displays the ruleset for the selected elements exactly as they did when they were written. Therefore, the Styles tab may display something like .subhead {font-size: 75%} , while the Calculate tab will display the actual font size, or 70% of the currently parsed value. For example, the actual font size of the rendered text shown above is 13.2px.

Next, let's briefly review the concepts of inheritance and cascade, which are two important factors in deriveing ​​the calculated values ​​in the Compute tab.

Inheritance and Cascading Crash Course

CSS stands for cascading style sheets, and the word “cascading” is very important – the way cascading behaves is the key to understanding CSS.

MDN

The cascade is worthy of attention because it represents the "C" in CSS. It is a mechanism used to resolve conflicts between sources of document declarations.

For example, suppose a style sheet defines the width of a div twice:

 <code>div { width: 65vw; } /* 在后面的某个位置*/ div { width: 85vw; }</code>

In this example, the second width wins because it declares at the end. The first width can still be used !important wins, but this is actually destroying the cascade by brute force. The key is that the cascading algorithm determines which styles are applied to each element and prioritizes them in a predetermined order to determine a value.

Cascading is suitable for explicitly set properties, whether set by browsers, web developers, or users. When the output of the cascade is empty, inheritance comes into play. When this happens, the calculated value of the attribute on the element's parent element is extracted as the attribute's own value. For example, if you specify a color for an element, if you do not specify the color of the child element, all child elements inherit that color.

Before we proceed, we should be familiar with the four key attribute values ​​related to inheritance. We will use them throughout the article.

initial

In HTML documents, the highest level of the DOM tree is Element, when we use initial keywords on elements, for example...

...The text color of this element is black, even if The element is set to green.<code><div> The selector has higher specificity, but we are interested in why <code>initial is converted to black.

Simply put, this keyword sets the default value of the attribute based on its definition table (in the CSS specification). In this case, black happens to be the browser's implementation of the initial color value.

I mentioned at the end of the article that you can see if the attributes are inherited by default by looking at the page on MDN. You can also find the initial value of any attribute in this way.

inherit

For non-inherited attributes, this keyword enforces inheritance. In the following example,<p> The element has solid red border. <code>border attribute is not inherited by default, but we can tell us by using the inherit keyword on border attribute<div> Inherited in<code><p> The same red border declared on the element:</p> <h4 id="unset"> unset</h4> <p> If the attribute is inherited, <code>unset will resolve to the inherited value. Otherwise, the initial value will be used. This basically means that unset resets the attribute based on whether the attribute inherits or not. Here is a demonstration that switches unset to show its effect on elements with different levels of specificity.

revert

If the CSS attribute is not set on the element, will it get any styles? certainly. It uses the default style of the browser.

For example,<span></span> The initial value of display property of an element is inline , but we can specify it as block in the stylesheet. Use the buttons in the following demo<span></span> Toggle revert on display and color properties of the element:

<span></span> Revert to inline elements correctly, but wait! Have you noticed<span></span> The color of the color changes to green instead of the browser's default black value? This is because revert allows inheritance. It will trace back to the browser's default value to set the color, but since we're in<p> Green is explicitly set on the element, so that's what inherits.</p> <h3 id="Find-calculated-values-in-the-developer-tool"> Find calculated values ​​in the developer tool</h3> <p> This is where we start talking about calculating values ​​in developer tools. Like the default value of a CSS attribute, the calculated value of a CSS attribute is determined by the definition table of the attribute in the CSS specification. Here is the appearance of the <code>height attribute.

Suppose we use relative lengths in CSS, such as one of 10em or 70% or 5vw. Since these are relative to something—the font size or viewport—they need to resolve to pixel absolute values. For example, if the viewport width is 1000px, an element with a width of 10% may be calculated as 100px, but if the viewport width changes, it will be calculated as other numbers.

These values ​​are calculated during a process called calculating style calculation when DOM is modified. This allows the browser to know which styles to apply to each page element.

Style calculation involves multiple steps involving multiple values. These are documented in the CSS Cascading and Inheritance Level 4 specifications, and they both affect the final values ​​we see in the Compute tab. Let's take a look at these next.

Values ​​and how to process them

Values ​​defined for the style calculation process include declared values , specified values , cascading values , calculated values , used values , and actual values . Who knows there are so many, right?

Declare value

Declare values ​​are any attribute declarations applied to elements. The browser recognizes these statements based on some conditions, including:

• The declaration is in the style sheet applied to the current document
• There is a matching selector in the style declaration
• Style declarations contain valid syntax (i.e. valid attribute names and values)

The following HTML:

<code><main>
<p>It's not denial. I'm just selective about the reality I accept.</p>
</main></code>

Here are the declared values ​​applied to text font size:

 <code>main { font-size: 1.2em; /* 如果段落元素没有被专门定位，这将适用，即使那样，作为继承值，而不是“声明值” */ } main > p { font-size: 1.5em; /* 声明值*/ }</code>

Cascaded values

All declared values ​​applied to an element are prioritized to return a single value:

• Source of the statement (it comes from a browser, developer, or other sources?)
• Whether the declaration is marked as " !important "
• The specificity of the rule (e.g., span {} and section span {} )
• Appearance order (for example, if multiple declarations are applied, use the last declaration)

In other words, the cascading value is a statement of "winning". If the cascade does not produce a winning declared value, then there is no cascade value.

 <code>main > p { font-size: 1.2em; } main > .product-description { /* 上一个规则中定位的相同段落*/ font-size: 1.2em; /* 基于特异性和文档顺序的级联值，忽略所有其他考虑因素，例如来源*/ }</code>

Specify value

As mentioned earlier, the cascading output may be empty. However, there is still a need to find the value in other ways.

Now, suppose we do not declare the value for a specific attribute on the element, but for the parent element. This is something we often do on purpose because there is no need to set the same value in multiple locations. In this case, the inherited value of the parent element will be used. This is called the specified value .

In many cases, cascading values ​​are also specified values. However, if there is no cascading value and the property of interest is inherited (whether it is inherited by default or using inherit keyword), it can also be an inherited value. If the property is not inherited, the specified value is the initial value of the property, as mentioned earlier, it can also be explicitly set using the initial keyword.

All in all, the specified value is the value we intend to use on the element, whether or not it is explicitly declared on that element. This is a bit fuzzy because if there is no declaration in the stylesheet, the browser's default value can also become the specified value.

 <code>/* 浏览器默认值= 16px */ main > p { /* 没有为段落元素及其所有祖先声明字体大小的值*/ }</code>

Calculate the value

We briefly discussed how relative values ​​need to be parsed into their absolute pixel equivalent values. As mentioned earlier, this process is predetermined. For example, the attribute definition table has a Calculated Value field that details how the specified value is usually parsed.

In the following example, we use em, which is a relative unit. Here, the final value used when rendering an element that the attribute is applied to is not a fixed number displayed in the declared value, but a value that needs to be calculated based on some factors.

 <code>main { font-size: 1.2em; } main > p { font-size: 1.5em; /* 声明值*/ }</code>

The font size of the paragraph element is set to 1.5em, which is 1.2em relative to the font size of main element. If main is Direct child elements of an element - and no additional font size declarations are made on it, for example by using the :root selector - we can assume that the calculation of paragraph font size will follow the following general process:

 <code>Browser_Default_FontSize = 16px; Calculated_FontSize_For_Main = 1.2 * Browser_Default_FontSize; // 19.2px Calculated_FontSize_For_Paragraph = 1.5 * Calculated_FontSize_For_Main; // 28.8px</code>

28.8px is the calculated value . Here is a demonstration:

Open the Developer Tools and view the calculated font size in the Calculate tab.

Suppose we are using rem unit:

 <code>html { font-size: 1.2em; } main { font-size: 1.5rem; } div { font-size: 1.7rem; }</code>

The calculated value of the rem unit is based on the font size of the root HTML element, which means the calculation will vary slightly. In this case, we also use relative units on HTML elements, so we use the browser's default font size value to calculate the base font size we will use to parse all rem values.

 <code>Browser_Default_FontSize = 16px Root_FontSize = 1.2 * Browser_Default_FontSize; // 19.2px Calculated_FontSize_For_Main = 1.5 * Root_FontSize; // 28.8px Calculated_FontSize_For_Div = 1.7 * Root_FontSize; // 32.64px</code>

Open the developer tools for this demo again:

The value of Browser_Default_FontSize is usually used by the browser, but this may vary from browser to browser. To view your current default values, select an element in the developer tool and view the font size displayed for it. Note that if you explicitly set a value for the root element like our example, you may have to close it in the Rules tab. Next, in the Calculation tab, toggle the Show All or Browser Styles (Firefox) checkboxes to view the default values.

During inheritance, the calculated value is passed from the parent element to the child element. This calculation process takes into account the four inheritance control keywords we saw earlier. Usually, the relative value becomes absolute (i.e. 1rem becomes 16px). This is also where the relative URL becomes an absolute path, and where keywords such as bolder (the value of font-weight property) are parsed. You can see more examples of this in the documentation.

Use value

The use of values ​​is the final result after all calculations are completed on the calculated values. Here, all relative values ​​become absolute values. This usage value will be applied (temporarily) to the page layout. You may be wondering why further calculations are needed. Isn't all this already processed in the previous stage when processing the specified value to calculate the value?

The problem is this: some relative values ​​can only be resolved to pixel absolute values ​​here. For example, the width specified by the percentage may require a page layout to be parsed. However, in many cases, the calculated value ends up being a used value as well.

Note that in some cases, the use value may not exist. According to the CSS Cascading and Inheritance Level 4 specification:

...If the attribute is not applied to an element, it does not use a value; therefore, for example, flex attribute does not use a value on an element that is not a flexible item.

Actual value

Sometimes, the browser cannot apply the usage value immediately and needs to be adjusted. This adjusted value is called the actual value . Consider the situation where the font size needs to be adjusted according to the available fonts, or if the browser can only use integer values ​​during rendering and needs to approximate non-integer values.

Inheritance in browser style calculation

In summary, inheritance controls the value of an element that is not explicitly set. For inherited attributes, this value is taken from the value calculated on the parent element, and for non-inherited attributes, the initial value of the attribute (the value used when initial keyword is specified).

We briefly discussed the existence of "calculated values" earlier, but we do need to clarify something. We discuss computed values ​​as a value type that participates in the style parsing process, but "computed values" is also a common term for values ​​calculated by browsers for page styles. You can usually understand what type we are referring to through the surrounding context.

Only computed values ​​can access inherited properties. A pixel absolute value (e.g. 477px), a number (e.g. 3), or a value (e.g. left (e.g. text-align: left ) is ready for the inheritance process. Percentage values ​​like 85% are not. When we specify relative values ​​for the attribute, the final (i.e. "used") value must be calculated. The percentage value or other relative value will be multiplied by the reference size (such as the font size) or the value (such as the width of the device viewport). Therefore, the final value of the attribute may be just the declared value and may also require further processing to be used.

You may have noticed that the values ​​displayed in the browser's Calculation tab are not necessarily the calculated values ​​we discussed earlier (such as calculated values ​​versus specified values ​​or using values). Instead, the displayed value is the same as the value returned by getComputedStyle() function. This function returns a value that depends on the property and will be a calculated value or a used value.

Now, let's look at some examples.

Color inheritance

 <code>main { color: blue; } /* 颜色无论如何都会继承，但我们也可以明确说明： */ main > p { color: inherit; }</code>

color attribute on main element is calculated as blue. Since color inheritance by default, we don't actually need to use color: inherit for paragraph child elements, as it will end up being blue as well. But this helps illustrate this.

The color value goes through its own parsing process to become the usage value.

Font size inheritance

 <code>main { font-size: 1.2em; } main > p { /* 未指定样式*/ }</code>

As we see in the section on the value and how it is processed, our font size relative value will be calculated as an absolute value and then inherited by the paragraph element, even if we do not explicitly declare it (again, font size inherits by default). If we have styled it before through the global paragraph element selector, the paragraph may get some extra style due to the cascade. Any possible inheritance value will be inherited, and some properties that do not produce values ​​will be set to their initial value.

Percentage specified font size inheritance

 <code>body { font-size: 18px; } main { font-size: 80%; } main > p { /* 未指定样式*/ }</code>

Similar to the previous example,<main></main> The font size of the element will be absolute before preparation for inheritance, and the paragraph will inherit a font size that is 80% of the body's 18px value, i.e. 14.4px.

Forced inheritance and post-layout calculation

Computed values ​​are usually parsed as many of the specified values ​​as possible without a layout, but as mentioned before, some values ​​can only be parsed after layout, such as the percentage specified width value. Although width is not an inheritance attribute, we can force inheritance to illustrate pre- and post-layout style parsing.

This is a artificial example, but what we did is remove the element from the page layout by setting display property to none . Two divs in our tag inherit 50% of the width of their parent element. In my developer tool "Computation" tab, the computed width of the first div is absolute and has been resolved to pixel values ​​(243.75px for me). On the other hand, the width of the second div removed from the layout using display: none is still 50%.

We will assume the specified and calculated value of the parent element is 50% (before layout), using the value as shown under the Calculation tab - for me it is 487.5px, after layout. This value quilt div is divided into two (including 50% of the block).

These values ​​must be calculated whenever the width of the browser viewport changes. Therefore, the value specified by the percentage becomes the percentage calculated value and then becomes the pixel usage value.

Default inherited properties

How do you know if attributes are inherited by default? For each CSS property in the MDN document, there is a specification section that provides some additional details, including whether the property is inherited or not. Here is the appearance of color attribute:

Which attributes inherit by default and which attributes do not, depends to a large extent on common sense.

MDN

Another reference option is the properties section of the W3C specification. The other is this StackOverflow thread, which may not be exhaustive at the time of writing.

Here are some default inherited attribute examples:

• color
• direction
• font-family
• font-size
• font
• letter-spacing
• line-height
• list-style-type
• tab-size
• text-align
• text-justify
• text-transform
• visibility
• word-wrap

Example of attributes that are not inherited (but you can force inheritance using inherit keyword):

• box-shadow
• border
• content
• height
• margin
• object-fit
• opacity
• padding
• position
• transform
• transition
• width
• z-index

Hopefully this gives you a clear understanding of how the browser calculates styles and how to reference them in developer tools. As you can see, there are a lot of value behind the scenes. Having these contexts is very helpful in helping you troubleshoot work and to learn more about the wonderful language CSS we know.

Further reading

• QuirksMode.org inherit , initial and unset values
• Asha Laxmi's CSS Inheritance: Introduction
• CSS inheritance, cascading, and global scope for Heydon Pickering: Your new, old, bad best friend
• Ollie Williams' latest approach to handling cascade, inheritance and specificity
• Cascading and inheritance of MDN
• MDN inheritance
• MDN's cascade
• CSS Cascade and Inheritance Level 4 (W3C Specification)
• Ilya Grigorik's render tree construction, layout, and drawing
• MDN's Window.getComputedStyle()
• Aaron Gustafson's interactive URL