Safe area inset environment variables
Widely available
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.
To learn more, see
env() at MDN.
Compatibility
- Chrome 69 Released on 2018-09-04
- Chrome Android 69 Released on 2018-09-04
- Edge 79 Released on 2020-01-15
- Firefox 65 Released on 2019-01-29
- Firefox for Android 65 Released on 2019-01-29
- Safari 11.1 Released on 2018-04-12
- Safari on iOS 11.3 Released on 2018-03-29