Day 82: value processing

posted on

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).

h1 specified values
property value origin
border-bottom-color currentColor initial
border-bottom-style none initial
color rebeccapurple cascaded
font-family Depends on the user agent inherited
width auto initial

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.

h1 computed values
property specified value computed value
border-bottom-color currentColor rgb(102, 51, 153)
border-bottom-style none none
color rebeccapurple rgb(102, 51, 153)
font-family Depends on the user agent Times (for example)
width auto auto

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.

h1 used values
property computed value used value
border-bottom-color rgb(102, 51, 153) rgb(102, 51, 153)
border-bottom-style none none
color rgb(102, 51, 153) rgb(102, 51, 153)
font-family Times Times
width auto 1062.27px (for example)

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.

h1 actual values
property used value actual value
border-bottom-color rgb(102, 51, 153) rgb(102, 51, 153)
border-bottom-style none none
color rgb(102, 51, 153) rgb(102, 51, 153)
font-family Times Times
width 1062.27px 1062px

See on CodePen.

Further reading