CSS environment variables

css

Browser support

env('VARIABLE_NME', FALLBACK_VALUE);
env(safe-area-inset-top, 12px)
env(safe-area-inset-right, 12px)
env(safe-area-inset-bottom, 12px)
env(safe-area-inset-left, 12px)

A specific viewport metatag property is needed:

<meta
name="viewport"
content="initial-scale=1.0, width=device-width, viewport-fit=cover"
/>

or

@viewport {
viewport-fit: cover;
}

Example

body {
padding-top: env(safe-area-inset-top, 12px);
padding-right: env(safe-area-inset-right, 12px);
padding-bottom: env(safe-area-inset-bottom, 12px);
padding-left: env(safe-area-inset-left, 12px);
}
Edit this page
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My memory bank.