We have safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom in CSS, but how can we get those values using JavaScript?

We have safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom in CSS, but how can we get those values using JavaScript?

• javascript
• iphone
• viewport
• iphone-x

• 2 @Scott How is this a duplicated? I have same question and the duplicated link gives no solution to this question. – Bryan Chen Commented Feb 1, 2018 at 3:29

1 Answer 1

From https://benfrain.com/how-to-get-the-value-of-phone-notches-environment-variables-env-in-javascript-from-css/. You can find more context in the link.

Within 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);
}

Within JS

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