[css-contain] Allow container query style features to evaluate in a boolean? #8127
Description
Dimensional media/container queries can evaluate in a boolean context. This isn't terribly useful (dimensional queries aren't the main use-case for booleans), but it works:
@container (inline-size) {
/* element has an inline-size container
with inline-size greater than 0 */
}With style queries, a boolean check is much more useful:
@container style(gap) {
/* remove margins when a gap is defined? */
}
@container style(--button-theme) {
/* shared styles for all button themes? */
}
@container style(--reverse) {
/* styles for something that's reversed? */
}I think all these checks are possible in the current spec by querying for initial and negating the query, so allowing boolean queries would just be syntax sugar:
@container not style(gap: initial) {
/* remove margins when a gap is defined? */
}
@container not style(--button-theme: initial) {
/* shared styles for all button themes? */
}
@container not style(--reverse: initial) {
/* styles for something that's reversed? */
}