Used value.

The used value of any CSS property is the final value of that property after all calculations have been performed.

Difference from computed values

For CSS properties that don't depend on layout (e.g., display, font-size, line-height), the computed values and used values are the same.

These are the CSS 2.1 properties that do depend on layout:

• background-position.
• bottom, left, right, top.
• height, width.
• margin-bottom, margin-left, margin-right, margin-top.
• min-height, min-width.
• padding-bottom, padding-left, padding-right, padding-top.
• text-indent.

Specified value is the result of cascading Inheritance or using the default.

Computed value is calculated according to the specification.* (pre-layout)

Then, layout is calculated and the Used value is calculated. (post-layout)

Finally, the Actual value is calculated.

* https://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

Four-step calculation.

Resolved value.

The resolved value of a CSS property is the value returned by:

window.getComputedStyle().

For most properties, it is the computed value, but for a few legacy properties (including width and height), it is instead the used value.

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 of getComputedStyle() had to remain the same for compatibility with deployed scripts.

To address this issue this specification introduces the concept of a resolved value.

https://drafts.csswg.org/cssom/#resolved-values

If the property applies to the element or pseudo-element and the resolved value of the display property is not none, the resolved value is the used value. Otherwise the resolved value is the computed value.

Example: Width.

Actual value.

The actual value of a CSS property is the used value after all approximations have been applied.

For example: A user agent may only be able to render borders with a integer pixel value and may be forced to approximate the computed width of the border.

The actual value is the used value after any approximations have been applied.

6.1 Specified, computed, and actual values.

https://www.w3.org/TR/CSS2/cascade.html

The final value of a property is the result of a four-step calculation:

The value is determined through specification (the "specified value"), then resolved into a value that is used for inheritance (the "computed value"), then converted into an absolute value if necessary (the "used value"), and finally transformed according to the limitations of the local environment (the "actual value").

What is next?

Box model.

Replaced element.

Value definition syntax.

Shorthand properties.

Concepts Part 5.

(Diego Gutierrez).