Open ghost opened 6 years ago
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?
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?
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")
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: