Widely availableSupported across all major browsers. Safe to use in production.
Syntax and cascade Widely available

Safe area inset environment variables

The safe-area-inset- CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, top:\ env(safe-area-inset-top); positions the top of an element below the notch on an iPhone.

Syntax and cascade

Overview

The safe-area-inset- CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, top:\ env(safe-area-inset-top); positions the top of an element below the notch on an iPhone.

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 safe-area-inset- CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, top:\ env(safe-area-inset-top); positions the top of an element below the notch on an iPhone.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links

Powered by web-features