Safe Area Variables Using env() CSS

mins


What does it do?

The env() CSS function can be used to insert the value of a user agent-defined environment variable into your CSS, in a similar fashion to the var() function and custom properties. The difference is that, as well as being user-agent defined rather than user-defined, environment variables are globally scoped to a document, whereas custom properties are scoped to the element(s) on which they are declared.

/* Using the four safe area inset values with no fallback values */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/* Using them with fallback values */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);

Cookie Notice Example

.cookieNotice{position:fixed;right:0px;left:0px;bottom:0px;padding-bottom calc( env(safe-area-inset-bottom) + 20px )}
I do not use cookies on this website

🍪🍪 What cookies?


Your privacy is important. That's why this website doesn't track visitors with fingerprinting, your IP address or cookies.


Web analytics data is your own. Reclaim it.

Gain back control with a privacy-focused web analytics platform (using a cookie-less architecture) from: Data Centurion.