🏠 New in High Baseline Support: Safe area inset environment variables

July 15, 2022

caniuse · mdn · spec

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.

Source features

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