Safe area inset environment variables
Widely available since 2022-07-15
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.
Learn more
Specifications
Browser support (view on caniuse.com)
- 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
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist