Re: [csswg-drafts] [css-conditional] `@supports-condition`, for larger feature queries and named reuse (#12622)

Naming TBD. One requirement is to harmonize the syntax between this and custom media queries.

Slight preference against `@custom-supports`/`@custom-media` because it implies that it creates an alias, but it actually allows expressing conditions that cannot be tested inline. That's good flexibility to have for custom media queries as well, in case we later extend them to be able to express things that can't be expressed inline.

Some ideas (in order of my personal preference):
- `@supports-query`/`@media-query`
- `@supports-test`/`@media-test`
- `@supports-condition`/`@media-condition`

Another important decision made in the call was to define the context of this rule as **a new stylesheet context**, so that `@import` features can be tested as well. This means we cannot have bare declarations inside it like in the OP, but a) it's easy to test those inline and b) one can always wrap in a dummy rule, like so:

```css
@supports-query --masonry-h {
 * {
  display: grid-stack;
  item-direction: row;
 }
}
```

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12622#issuecomment-3205078798 using your GitHub account


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

Received on Wednesday, 20 August 2025 09:20:29 UTC