This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
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).
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.
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
.
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.
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 |
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-01-17T09:38:54+00:00) Day 82: value processing. Retrieved from https://www.scien.cx/2023/01/17/day-82-value-processing/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.