CSS environment variables

Note date 22 Mar, 2020
Tags css
👋 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 

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