CSS environment variables

👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page

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 Jump to heading

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

← Back home