[csswg-drafts] [css-contain] Allow container query style features to evaluate in a boolean? (#8127)

mirisuzanne has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain] Allow container query style features to evaluate in a boolean? ==
Dimensional media/container queries can [evaluate in a boolean context](https://www.w3.org/TR/mediaqueries-4/#mq-boolean-context). This isn't terribly useful (dimensional queries aren't the main use-case for booleans), but it works:

```css
@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:

```css
@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:

```css
@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? */
}
```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8127 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 22 November 2022 18:33:31 UTC