search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.46k stars 658 forks source link

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

Open upsuper opened 5 years ago

upsuper commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

upsuper commented 5 years ago

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 commented 4 years ago

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