This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Registering typed custom properties can be useful in container style queries.
The following container style query matches because the computed value of both --bg and --color is “red”.
html {
--color: red;
}
.card {
--bg: red;
}
/* Condition is true, styles applied */
@container style(--bg: var(--keyword)) {
h1 {
border: 10px dotted fuchsia;
}
}What's important to understand is that we're comparing two strings, not colors. If we change --color to rgb(255 0 0), the query doesn't match anymore.
html {
--color: rgb(255 0 0);
}
.card {
--bg: red;
}
/* Condition is false, styles not applied */
@container style(--bg: var(--color)) {
h1 {
border: 10px dotted fuchsia;
}
}That's where the @property rule comes into play. It allows us to add a type to a custom property and turn --bg into a proper color value.
@property --bg {
syntax: '<color>';
inherits: true;
initial-value: rgb(0 0 0);
}
html {
--color: rgb(255 0 0);
}
.card {
--bg: red;
}
/* Condition is true, styles applied */
@container style(--bg: var(--color)) {
h1 {
border: 10px dotted fuchsia;
}
}As you can see, you only have to add a type to --bg and not --color, as well. That's because --bg is resolved as a color in both the declaration in .card and in the query.
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-20T09:38:54+00:00) Day 85: typed custom properties in container style queries. Retrieved from https://www.scien.cx/2023/01/20/day-85-typed-custom-properties-in-container-style-queries/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.