This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
On day 80, I’ve explained that we can check whether a container has a specific property and value assigned and apply additional styles based on this condition. On day 82, I’ve explained that the value of a property can come from different sources, undergo adjustments before it becomes the actual value, and take on different forms along the way. To use container style queries, it’s important to understand which value's being used in queries.
Let’s start nice and easy. We have a .card and the value of the --bg property is red. In a style query, we check if that’s actually the case and apply conditional style to the <h1> nested in the card.
<div class="card">
<h1>heyho</h1>
</div>.card {
--bg: red;
}
@container style(--bg: red) {
h1 {
border: 10px dotted aqua;
}
}Result: the <h1> gets a beautiful dotted border.
If we put the color value in its own property and query the assignment of the var() function to the --bg property, the styles will be applied, as well.
html {
--color-red: red;
}
.card {
--bg: var(--color-red);
}
@container style(--bg: var(--color-red)) {
h1 {
border: 10px dotted aqua;
}
}Here's where it gets really interesting: If we change the query back to style(--bg: red), the styles still apply.
html {
--color-red: red;
}
.card {
--bg: var(--color-red);
}
@container style(--bg: red) {
h1 {
border: 10px dotted aqua;
}
}Even if we never assign --color-red to --bg, but they have the same value, the styles still apply.
html {
--color-red: red;
}
.card {
--bg: red;
}
@container style(--bg: var(--color-red)) {
h1 {
border: 10px dotted aqua;
}
}The “simple” explanation is that style queries compare the equality of computed values and not assignments. The computed value results from resolving value dependencies, which generally means absolutizing relative values. Both sides of the query are evaluated and resolved before the comparison.
So, in each example the actual comparison is something like:
/* Note: this is not valid syntax, it's just an
illustration of the underlying comparison. */
@container style("red": "red") {
h1 {
border: 10px dotted aqua;
}
}My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-01-18T00:00:00+00:00) Day 83: computed values in container style queries. Retrieved from https://www.scien.cx/2023/01/18/day-83-computed-values-in-container-style-queries-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.