[css-env-1] Clarify how variables can be detected

[ghost]

For variables exposed through the user agent (e.g. display cutout) it would be good to have some way of detecting whether an env() variable is available.

Two possible ways we could do this:

• Through the JS API defined in [css-env-1] variables should be exposed to script #2628
• Though CSS.supports() e.g. CSS.supports('env(safe-area-inset-top)') => true

[benfrain]

These values have been in devices for nearly two years now and other than UA sniffing combined with screen measurement we don't have any means at our disposal to read in the values.

Something like this would be most welcome:

getComputedStyle(element).getPropertyValue(env(safe-area-inset-top));

Is there any progress on exposing these values to script?

[emilio]

other than UA sniffing combined with screen measurement we don't have any means at our disposal to read in the values.

Wait, why does:

div.style.width = "env(safe-area-inset-top)";
getComputedStyle(div).width

not work?

[benfrain]

Hi,

That results in this:

<div style="width: env(safe-area-inset-top);"></div>

However, one of the specification authors came through with the solution to this (for my scenario at least):

CSS:

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

JS:

getComputedStyle(document.documentElement).getPropertyValue("--sat")

Full info: https://benfrain.com/how-to-get-the-value-of-phone-notches-environment-variables-env-in-javascript-from-css/