[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? */ }