[csswg-drafts] [css-conditional] Combined @supports properties (#5062)

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

== [css-conditional] Combined @supports properties ==
Now that flexbox `gap` is landing in Chromium 85, I created [a demo](https://codepen.io/bramus/pen/ExVRwyE) for it.

In said demo I wanted to show a warning on top, in case the browser does not support flexbox gap, using [`@supports`](https://drafts.csswg.org/css-conditional-3/#at-supports)

_(A more Real World use-case might be to implement a fallback – using `margin` – in case flexbox gap is not supported)_

I tried this:

```css
.warning {
 display: block;
}

/* Hide warning in case browser supports flexbox gap */
@supports (display: flex) and (gap: 1em) {
  display: none;
 }
}
```

In Chromium < 85 – which does not support flexbox gap – the warning is hidden, this because both conditions are evaluated *separately*:

- Does Chromium < 85 support `display: flex`? yes
- Does Chromium < 85 support `gap: 1em`? yes _(with CSS Grid)_

Looking at the spec there does not seem to be a way to combine these conditions _(or it could be I'm overlooking something?)_. Since the use of parens do not really have influence on the combination of the `supports-condition`s, I was thinking of something like this:

```css
@supports (display: flex; gap: 1em) {
  display: none;
 }
}
```

Here the browser should check if supports both these properties, when both applied.

Would this be a feasible addition to the spec?



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

Received on Tuesday, 12 May 2020 09:06:35 UTC