Day 82: value processing

posted on 17.01.2023

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

This post differs from most of the other posts because it’s not about modern CSS, but about CSS fundamentals. When I was writing about custom properties and especially about container style queries, I realized that I had to understand some of the basics of the language first before I could comprehend how certain properties and rules worked.

The final value of a property in CSS is the result of a multi-step calculation. In this process, the actual value of a property can come from different sources, take on different forms, and undergo adjustments.

Declared Values

A property may have multiple declared values. Each property declaration applied to an element contributes a declared value.

h1 {
  color: aqua;
}

#heading {
  color: rebeccapurple;
}

.heading {
  color: fuchsia;
}

The color property has 3 declared values. The cascade takes theses values and chooses a single “winning” value, the cascaded value.

Cascaded Value

The cascaded value represents the result of the cascade. It’s the declared value with the highest precedence.

#heading {
  color: rebeccapurple;
}

Specified Value

If the cascade results in a value, the specified value equals the cascaded value. If not, the property must take their value from somewhere else. Inherited properties draw their value from their parent element. All other properties use their initial value.

If we take the <h1> as an example, we get the following values and origins for the border-bottom-color, border-bottom-style, color, font-family, and width properties. (These properties are just examples).

Computed value

A specified value can either be relative or absolute. Relative means relative to another value, like 50%, 2em, or lighter. Absolute is the opposite, for example, 200px, 2mm, or bold.

The computed value results from resolving value dependencies, which generally means absolutizing relative values. You can find how a property value is resolved in the property definition table of the property in the specification.

Used value

In the previous chapter, I said that computing values generally means absolutizing relative values. For example, font-size: 1rem; becomes font-size: 16px;, but that’s not true for every property.

width: 80%; stays width: 80%. Per definition, the computed value of the width property is “as specified”. That’s because width: 80%; can’t be resolved into a length without knowing the layout of the element’s ancestors.

The used value takes the computed value and completes any remaining calculations to make it the absolute theoretical value used in the formatting of the document. For example, width: 80%; becomes width: 420px.

Actual value

In principle, the “used value” is ready, but the user agent may need to adjust the value in order to make use of it. For example, the font size of an element may need adjustment based on the presence of the font-size-adjust property, or floats may need to be converted to integers.

See on CodePen

Further reading

• 4. Value Processing
• 2.1. Font family: the font-family property
• 3.1.1. Preferred Size Properties: the width and height properties
• 14. Resolving Values
• 3.1. Line Colors: the border-color properties
• 3.2. Line Patterns: the border-style properties
• Day 63: explicit defaulting with inherit, initial, unset, and revert

Overview: 100 Days Of More Or Less Modern CSS