W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2019

Re: [csswg-drafts] [css-env-1] Clarify how variables can be detected (#2732)

From: Ben Frain via GitHub <sysbot+gh@w3.org>
Date: Thu, 29 Aug 2019 11:08:37 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-526138656-1567076915-sysbot+gh@w3.org>
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:

```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:
```javascript
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/

-- 
GitHub Notification of comment by benfrain
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2732#issuecomment-526138656 using your GitHub account
Received on Thursday, 29 August 2019 11:08:38 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:31:13 UTC