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.

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

BCD data

• css.properties.custom-property.env
• css.properties.custom-property.env.safe-area-inset-bottom
• css.properties.custom-property.env.safe-area-inset-left
• css.properties.custom-property.env.safe-area-inset-right
• css.properties.custom-property.env.safe-area-inset-top