Re: [csswg-drafts] [css-env][css-conditional] Need an approach to check whether an environment variable is supported (#3576)

I ran into this when trying to feature detect support for the new `safe-area-max-inset-bottom` envvar introduced in #11019.

The following check _([live demo](https://codepen.io/bramus/pen/VYwaxqW/4f856abd0eee483e5044919803848ad2))_ always passes in all browsers, because parsers support the syntax:

```css
body {
 background: red;
 @supports (x: env(safe-area-max-inset-bottom)) {
  background: green;
 }
}
```

A workaround that I found, is to default to a an unreachable value and then use a style query to check the result ([live demo](https://codepen.io/bramus/pen/pvoyVGX/2867dffa407bcc51bb33582989a89ccd)):

```css
@property --safe-area-max-inset-bottom-support {
 syntax: "<length>";
 inherits: true;
 initial-value: 0px;
}

:root {
 --safe-area-max-inset-bottom-support: env(safe-area-max-inset-bottom, -1px); /* When supported the value returned will be 0px or greater */
 --safe-area-max-inset-bottom: max(0px, var(--safe-area-max-inset-bottom-support));
}

body {
 background: green;
 @container style(--safe-area-max-inset-bottom-support: -1px) {
  background: red;
 }
}
```

This however only works in browser that support style queries, which currently excludes Firefox.

A proper solution would be needed.

---

I suggest to extend `<supports-feature>` with a `<supports-env-fn>`, like so:

```
<supports-feature> = <supports-selector-fn> | <supports-env-fn> | <supports-decl>
<supports-selector-fn> = selector( <complex-selector> )
<supports-env-fn> = env( <custom-ident> )
```

When the passed in `<custom-ident>` is one of the supported Environment Variables, the result is `true`. Otherwise it is `false`.

Example usage:

```
@supports env(safe-area-max-inset-bottom) { … }
```

WDYT @fantasai?

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


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

Received on Friday, 21 February 2025 12:49:54 UTC