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.

Baseline Status: Achieved Widely Available on Jul 15, 2022 (Cross-browser Newly Available since Jan 15, 2020).

Desktop Browser Engine Support

Google Chrome

69

Supported

Mozilla Firefox

65

Supported

Apple Safari

11.1

Supported

Microsoft Edge

79

Supported

Mobile Browser Engine Support

Chrome Android

69

Firefox Android

65

Safari iOS

11.3

Specifications and References

Specification ↗ Can I Use (css-env-function) ↗ Feature XML ↗

MDN Browser Compat Data Keys:

css.types.env ↗ css.types.env.safe-area-inset-bottom ↗ css.types.env.safe-area-inset-left ↗ css.types.env.safe-area-inset-right ↗ css.types.env.safe-area-inset-top ↗