Widely available Supported across all major browsers. Safe to use in production.

Safe area inset environment variables

The env() CSS function can be used to insert the value of a user-agent defined environment variable into your CSS.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
env
69
79
65
11.1
69
11.3
safe-area-inset-bottom

Safe area inset variable `safe-area-inset-bottom`
69
79
65
11
69
11
safe-area-inset-left

Safe area inset variable `safe-area-inset-left`
69
79
65
11
69
11
safe-area-inset-right

Safe area inset variable `safe-area-inset-right`
69
79
65
11
69
11
safe-area-inset-top

Safe area inset variable `safe-area-inset-top`
69
79
65
11
69
11
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (11.1)
Implementation note
  • Previously available under a different name: constant (11)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (11.3)
Implementation note
  • Previously available under a different name: constant (11)

Syntax

CSS 
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

Live demo

safeallrange with env

safeallrange demo. with CSS env

PreviewFullscreen

bottomse-fuarea

CSS bottomse-fuarea demo.

PreviewFullscreen

alldirectionpadding

CSS alldirectionpadding demo.

PreviewFullscreen

Use cases

  • Using Safe area inset environment variables

    The env() CSS function can be used to insert the value of a user-agent defined environment variable into your CSS.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links