W3C TPAC 2022 in Vancouver is over. It was strange to meet after these 3 years away. There would be a lot more to say about this. During the CSS WG meetings, participants are talking about all kind of CSS values. It's quickly confusing.
The processing order is explained in details in the Cascading and Inheritance Level 5
Actual Value
There is not really a definition for the actual value.
A used value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the used width. Also, the font size of an element may need adjustment based on the availability of fonts or the value of the font-size-adjust property. The actual value is the used value after any such adjustments have been made.
in 4.6. Actual Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022
if I had to rewrite this, I would probably say:
The actual value is the used value after any adjustments made depending for the computing environment context.
Think for example, about rounding adjustments when drawing on a screen for a certain resolution.
Used Value
The used value is the result of taking the computed value and completing any remaining calculations to make it the absolute theoretical value used in the formatting of the document.
in 4.5. Used Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022
Let's reuse the example of the specification.
For example, a declaration of
width: autocan’t be resolved into a length without knowing the layout of the element’s ancestors, so the computed value isauto, while the used value is an absolute length, such as100px.
Computed Value
The computed value is the result of resolving the specified value as defined in the “Computed Value” line of the property definition table, generally absolutizing it in preparation for inheritance.
in 4.4. Computed Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022
For example, when we specify the font-size of a paragraph, when the default font-size of the document is 16px.
p {font-size: 2em;}
The computed value will be 32px.
🚨 window.getComputedStyle(elt) doesn't return systematically the computed value. It returns the resolved value (see below)
<p style="width:auto;">confusing?</p>
</div>
const para = document.querySelector('p');
const usedValue = window.getComputedStyle(para).width;
The computed value will be auto, but the the resolved value will be the current width of the parent element.
Specified Value
The specified value is the value of a given property that the style sheet authors intended for that element. It is the result of putting the cascaded value through the defaulting processes, guaranteeing that a specified value exists for every property on every element.
in 4.3. Specified Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022
<p class="a">falls</p>
<p>and streams</p>
with
p {color: green;}
p.a {color: red;}
To extract the specified value
document.styleSheets[0].cssRules[1].style.getPropertyValue('color')
will return red.
If you need access to the full declaration, use cssRule.cssText
document.styleSheets[0].cssRules[1].cssText
will return p.a { color: red; }
To not be confused with
document.querySelector('.a').style.cssText
which will return an empty string, because there is no style attribute on the element.
Cascaded Value
The cascaded value represents the result of the cascade: it is the declared value that wins the cascade (is sorted first in the output of the cascade). If the output of the cascade is an empty list, there is no cascaded value.
in 4.2. Cascaded Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022
<p class="a">falls</p>
<p>and streams</p>
with
p {color: green;}
p.a {color: red;}
The cascaded value for <p class="a"> is red. Note that the used value will be rgb(255, 0, 0).
Declared Value
Each property declaration applied to an element contributes a declared value for that property associated with the element.
in 4.1. Declared Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022
Initial Value
Each property has an initial value defined in the property’s definition table. If the property is not an inherited property and the cascade does not result in a value then the specified value of the property is its initial value.
in 7.1 Initial Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022
For example, the initial value on background-color is transparent. This is the color that you can find in the default CSS.
Resolved Value
This time, we changed specification.
getComputedStyle()was historically defined to return the "computed value" of an element or pseudo-element. However, the concept of "computed value" changed between revisions of CSS while the implementation ofgetComputedStyle()had to remain the same for compatibility with deployed scripts. To address this issue this specification introduces the concept of a resolved value.
in 9. Resolved Values, CSS Object Model (CSSOM), Editor’s Draft, 18 October 2022
The resolved value is either the computed value or the used value. This is dependent of each property.
Relative value
This is not really defined, but this is mentioned in computed value explanations.
A specified value can be either absolute (i.e., not relative to another value, as in red or 2mm) or relative (i.e., relative to another value, as in auto, 2em). Computing a relative value generally absolutizes it.
in the example 12 of the section about computed Value.
For example anything such as em, percentages, relative URLs, etc.
Absolute Value
Not defined but the term is used.The absolute value is a value which has no dependency on the environment, such as red or 3px.
If I have forgotten some. Let me know.
Otsukare!