HTML & CSS reference

env()

Reads values set by the device, such as the safe areas around a phone's notch and rounded corners.

Syntax

env(safe-area-inset-top, fallback)

Parameters

Parameter	Type	Description
safe-area-inset-*	length	The safe distance from the `top`, `right`, `bottom` or `left` edge.
fallback	length	The value if the device does not provide one.

Examples

Padding that avoids the system home indicator:

<style>
  .bar {
    position: sticky; bottom: 0;
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: navy; color: white;
  }
</style>
 
<p>On phones with a notch, the bar is not covered by the system home indicator.</p>
<div class="bar">Bottom bar</div>

Notes

The safe areas are nonzero only if the page extends under the notch: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">. On ordinary screens env() returns 0 or the fallback.

In the tutorial

Media queries — Responsive layout with media queries — the viewport tag, the @media rule, min-width and max-width, the mobile first approach and rebuilding the skeleton.

Thanks for reading!