[css-env][css-conditional] Need an approach to check whether an environment variable is supported

[upsuper]

Websites need to detect whether an environment variable is support in order to have special rules applied on it. It seems there is currently no way to do that.

Natively authors would just use something like

@supports (padding-top: env(safe-area-inset-top)) { ... }

for the detection, but the only thing it checks is that env is supported. If you replace safe-area-inset-top with something else like x, all implementations nowadays would still happily accept it. This is problematic for future extensions.

I'm not sure whether #3285 would solve this (and breaks things like env(x) in @supports). If not, we probably need to either special-case the behavior of env in @supports, or introduce a function for it.

[emilio]

So I thought that was the purpose for the fallback value in env()? But maybe there's a use-case for detecting a particular environment variable?

Ideally you'd use env(my-var, 10px) or such.

[upsuper]

Yeah, probably fallback is enough... I need to think more about possible usecases.

[upsuper]

Okay... I cannot think of any usecase. Authors may want to specify different style when certain env is available, but conceptually I think what they would actually want would be to make the page responsive to different value of the env, which should be done with media queries, and in that case, fallback should be enough.

[fantasai]

Unlike variables, the set of supported environment variables isn't open-ended, though. Seems legit to ask about support.