CSS property value processing

Every CSS property's value comes from the declaration with the greatest specificity. If two or more declarations with the same specificity provide different property values for the same element, the declaration value whose selector has the greatest algorithmic weight gets applied.

Each property value comes from a single property-value pair; is single value is applied from each property. Even if the value is a comma separated list of values, that list of values came from a single declaration.

To determine which specified value is applied, the user agent gathers and processes all the styles from different sources, such as inline styles, and internal and external stylesheets.

Certain properties inherit values from their parent elements unless explicitly overridden. Inheritance occurs when no style information exists for a specific property on an element. If the property is inherited, the value is set to the computed value of the parent element. If the property is not inherited, its value is set to the initial value for that element.

The cascade determines which value should be applied when multiple conflicting styles target the same element. The cascade algorithm defines how user agents combine property values originating from different sources, scopes, and/or layers. When a selector matches an element, the property's specified value from the origin with the highest precedence gets applied, even if a selector from a lower precedence origin or layer has greater specificity.

After applying the cascading rules and resolving values step by step, the browser ensures the visual presentation matches the processed CSS.

All elements that are part of the document's flattened element tree have declared, cascaded, specified, computed, used, and actual values. For a specific property, these values may or may not be the same. For example, if your large code base includes the CSS p { font-size: 1.25em; }"and your HTML includes <p>CSS is fun!</p>, what size will the paragraph be? The font-size value moves through a few stages to go from the em specified value to the rendered px value.

• Initial value
• Specified value
• Computed value
• Used Value

These values are used to determine the final rendered value.

A property's initial value is the default value as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not:

For inherited properties, the initial value is used on the root element only, as long as no specified value is supplied.

• For non-inherited properties, the initial value is used on all elements, as long as no specified value is supplied.

You can explicitly set the initial value by using the initial keyword.

The specified value is the value initially assigned in the CSS file or by the style attribute. 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.
3. If none of the above apply, the element's initial value will be used.

In the example, p { font-size: 1.25em; }, the specified value is 1.25em, unless the codebase includes a font-size declaration with greater specificity.

The computed value of a property is the value transferred from parent to child during inheritance. It is the result after resolving things like relative units and custom properties into absolute values, but before considering layout-specific information.

The computed value is calculated from the specified value by:

1. Handling the special values inherit, initial, revert, revert-layer, and unset.
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. 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.

Given p { font-size: 1.25em; }, if em is 16px, the computed font size for a paragraph will be 20px.

The used value is the property's value after all calculations have been performed on the computed value and it has been refined with layout-specific details (e.g., percentages resolved to actual pixel values).

Every CSS property has a used value. The used values of dimensions (e.g., width or 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.

The used value for the width or inline-size of an element is a pixel value even if the specified value of the property was set with percentages or keyword values.

If we have three container elements with their width set as auto, 50%, and inherit:

<div id="no-width">
  <p>No explicit width.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Explicit width: 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Explicit width: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>

#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/* Make results easier to see */
div {
  border: 1px solid red;
  padding: 8px;
}

function updateUsedWidth(id) {
  const div = document.getElementById(id);
  const par = div.querySelector(".show-used-width");
  const wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener("resize", updateAllUsedWidths);

While the three specified values, auto, 50%, and inherit, are keyword and <percentage> values, retrieving the width using window.getComputedStyle(el)["width"]; returns an absolute length px value:

Change the window size or rotate your mobile device to change the size and the used values.

The rendered value is called the actual value, while the value retrieved via script is called the resolved value.

The actual value of a property is the used value of that property after any necessary approximations have been applied. It is the final rendered value as implemented by the browser, including adjustments for rendering quirks or limitations. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

The calculation includes these steps:

1. First, the specified value is determined based on the result of cascading, inheritance, or using the initial value.
2. Next, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block).
3. Then, layout is calculated, resulting in the used value.
4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.

The resolved value of a property is the value after applying active stylesheets and resolving any basic computation those values may contain. The getComputedStyle() method returns a live CSSStyleDeclaration object containing the resolved values of all CSS properties applied to a specified element. Each resolved value is either the computed value or the used value, depending on the property.

Historically, getComputedStyle() returned the computed value of an element or pseudo-element. As CSS evolved, so did the concept of "computed value", but the values returned by getComputedStyle() had to remain the same for backward compatibility with deployed scripts. These values are the "resolved values".

For most properties, the resolved value is the computed value, but for a few legacy properties (including width and height), it is the used value. The CSSOM specification provides per-property details.

CSS 2.0 defined computed value as the last step in a property's calculation. CSS 2.1 introduced the distinct definition of "used value". An element could then explicitly inherit the width/height of its parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., display, font-size, or line-height), the computed values and used values are the same. The following list contains the CSS 2.1 properties that do depend on layout, and therefore have a different computed value and used value (taken from CSS 2.1 Changes: Specified, computed, and actual values):

• 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

• CSS values for controlling inheritance: inherit, initial, revert, revert-layer, and unset
• CSS cascading and inheritance module
• CSS syntax module