Values and how they're processed

https://css-tricks.com/computed-values-more-than-meets-the-eye/#comment-1785337

---

The values defined for the style calculation process include the declared value, the specified value, the cascaded value, the computed value, the used value, and the actual value.

Declared values - 声明值

A declared value is any property declaration applies to an element. A browser identifies these declarations based on a few criteria, including:

• the declaration is in a stylesheet that applies to the current document
• there was a matching selector in a style declaration
• the style declaration contains valid syntax (i.e, valid property name and value)

Take the following HTML:

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

Here are declared values that apply to the font-size of the text:

main {
  font-size: 1.2em; /* this would apply if the paragraph element wasn't targeted specifically, and even then, as an inherited value, not "declared value" */
}


main > p {
  font-size: 1.5em; /* declared value */
}

Cascaded values - 层叠值

The list of all declared values that apply to an element are prioritized based things like these to return a single value:

1. !important：whether or not the declaration is marked ‘!important’
2. origin：origin of the declaration (is it from the browser, developer, or another source?)
3. specificity：how specific a rule is (e.g, span {} vs section span {}) - 优先级
4. order：order of appearance (e.g, if multiple declarations apply, the last one will be used)

In other words, the cascaded value is the “winning” declaration. And if the cascade does not result in a winning declared value, well, then there is no cascaded value.

• 在 all declared value中，依次根据!important、origin、specificity、order，确定一个winning value, 此即为cascaded value
• 排除两类值: inherited value、initial value。这两类值，是specified value要解决的问题。

main > p  {
  font-size: 1.2em;
}

main > .product-description { /* the same paragraph targeted in the previous rule */
  font-size: 1.2em; /* cascaded value based on both specificity and appearance order, if ignoring all other considerations such as origin */
}

Specified values - 指定值

The specified value of a CSS property is the value it receives from the document's style sheet. The specified value for a given property is determined according to the following rules:

1. If the document's style sheet explicitly specifies a value for the property, the given value will be used. - 指定值

2. If the document's style sheet doesn't specify a value but it is an inherited property, the value will be taken from the parent element. -- 继承值

   此时的继承值, 如果是relative, 则尚未转为absolute. 要在后面的computed value阶段, relative才转为absolute

3. If none of the above pertain, the element's initial value will be used. - 默认值

---- MDN

As mentioned earlier, it is possible for the output of the cascade to be empty. However, a value still needs to be found by other means.

根据cascade sheet，cascaded value可能为empty。但value不能为empty, 所以要根据其它途径找出value。

Now, let’s say we didn’t declare a value for a specific property on an element, but did for the parent. That’s something we often do intentionally because there’s no need to set the same value in multiple places. In this case, the inherited value for the parent is used. This is called the specified value.

???? - In this case, the inherited value for the parent is used.

In many cases, the cascaded value is also the specified value. However, it can also be an inherited value if there is no cascaded value and the property concerned is inherited, whether by default or using the inherit keyword. If the property is not inherited, then the specified value is the property’s initial value, which, as mentioned earlier, can also be set explicitly using the initial keyword. The browser’s default can also become the specified value if nothing is declared in the stylesheet.

/* Browser default = 16px */


main > p {
  /* no declared value for font-size for the paragraph element and all its ancestors */
}

Computed values - 计算值

The computed value of a CSS property is the value that is transferred from parent to child during inheritance. It is calculated from the specified value by:

1. Handling the special values inherit, initial, unset, and revert. - 继承
2. Doing the computation needed to reach the value described in the "Computed value" line in the property's definition table. - 相对转绝对

The computation needed to reach a property's computed value typically involves converting relative values (such as those in em units or percentages) to absolute values. For example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size).

However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values.

--- percentage-computed values, 指的应该是根据percentage-specified value计算而得的absolute value, 即a calculated value, a real value (such as a width in pixels for a length value) 

Additionally, unitless numbers specified on the line-height property become the computed value, as specified. The relative values that remain in the computed value become absolute when the used value is determined.

--- MDN

• 是在inheritance过程中, parent 向 child 传递的 value
• 由specified value根据以下两点计算而来
  • 处理 controlling value: inherit, initial, unset, revert(还原)
  • converting relative values(em, rem, percentage) to absolute values --> pre-determined
    • 例外1: Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a length value) will be accessible on the inherited property, not the percentage value. ---MDN
    • 例外2: line-height的unitless number, 直接成为computed value

Earlier, we discussed, briefly, how relative values needed to be resolved to their pixel-absolute equivalent. This process, as already noted, is pre-determined. For example, property definition tables have a “Computed value” field that detail how specified values, in general, are resolved.

---The specifications section of the MDN docs for the color property.

In the following example, we’re working with the em, a relative unit. Here, the final value used when rendering the element to which the property applies is not a fixed number as seen in our declared value, but something that needs to be calculated based on a few factors.

main {
  font-size: 1.2em;
}


main > p {
  font-size: 1.5em; /* declared value */
}

The font-size of the paragraph element is set to 1.5em, which is relative to the font-size value of the main element, 1.2em. If main is a direct child of the body element – and no additional font-size declarations are made above that, such as by using the :root selector – we can assume that the calculation for the paragraph’s font-size will follow this approximate course:

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

That 28.8px is the computed value. Here’s a demo:

Open up DevTools and check out the computed font sizes in the Computed tab.

The declared font-size for the main element is 1.2em, which computes to 19.2px.

The declared font-size for the paragraph element is 1.5em, which computes to 28.8px.

Let’s say we’re using rem units instead:

html {
  font-size: 1.2em;
}


main {
  font-size: 1.5rem;
}


div {
  font-size: 1.7rem;
}

The computed value of a rem unit is based on the font-size of the root HTML element, so that means that the calculation changes a little bit. In this specific case, we’re using a relative unit on the HTML element as well, so the browser’s default font-size value is used to calculate the base font-size we’ll use to resolve all our rem values.

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

Open up DevTools again for this demo:

The value, 16px, for Browser_Default_FontSize is commonly used by browsers, but this is subject to variation. To see your current default, select the <html> element in DevTools and check out the font-size that is shown for it. Note that if a value was set for the root element explicitly, just as in our example, you may have to toggle it off in the Rules tab. Next, toggle on the “Show all” or “Browser styles” (Firefox) checkbox in the Computed tab to see the default.

During inheritance, computed values are passed down to child elements from their parents. The computation process for this takes into account the four inheritance-controlling keywords(inherit, initial, unset, revert) we looked at earlier. In general, relative values become absolute (i.e. 1rem becomes 16px). This is also where relative URLs become absolute paths, and keywords such as bolder (value for the font-weight property) get resolved. You can see more Examples of CSS Value Computation below.

	Property	Winning declaration	Cascaded value	Specified value	Computed value	Used value	Actual value
(a)	text-align	text-align: left	left	left	left	left	left
(b)	border-top-width, border-right-width, border-bottom-width, border-left-width	border-width: inherit	inherit	4.2px	4.2px	4.2px	4px
(c)	width	(none)	(none)	auto (initial value)	auto	120px	120px
(d)	list-style-position	list-style-position: inherit	inherit	inside	inside	inside	inside
(e)	list-style-position	list-style-position: initial	initial	outside (initial value)	outside	outside	outside
(f)	font-size	font-size: 1.2em	1.2em	1.2em	14.1px	14.1px	14px
(g)	width	width: 80%	80%	80%	80%	354.2px	354px
(h)	width	width: auto	auto	auto	auto	134px	134px
(i)	height	height: auto	auto	auto	auto	176px	176px
(j)	page-break-after	(none)	(none)	auto (initial value)	auto	auto	auto
(k)	orphans	orphans: 3	3	3	3	3	3

Used values - 应用值

The used value of a CSS property is its value after all calculations have been performed on the computed value.

After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., width, line-height) are in pixels. The used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-color or background-size) and with position and float.

---- MDN

The used value is the final result after all calculations are done on the computed value. Here, all relative values are turned absolute. This used value is what will be applied (tentatively) in page layout. You might wonder why any further calculations have to happen. Wasn’t it all taken care of at the previous stage when specified values were processed to computed values?

为啥computed value都完成了, 还要再进行以得到used value呢?

Here’s the thing: some relative values will only be resolved to pixel-absolutes at this point. For example, a percentage-specified width might need page layout to get resolved. However, in many cases, the computed value winds up also being the used value.

Note that there are cases where a used value may not exist. According to the CSS Cascading and Inheritance Level 4 specification:

…if a property does not apply to an element, it has no used value; so, for example, the flex property has no used value on elements that aren’t flex items.

Actual values - 实际值

Sometimes, a browser is unable to apply the used value straightaway and needs to make adjustments. This adjusted value is called the actual value. Think of instances where a font size needs to be tweaked(修改) based on available fonts, or when the browser can only use integer values during rendering and need to approximate non-integer values.