env() Environment Variables

env() Environment Variables

Read values that come from the browser/device environment, like iPhone safe areas.

The safe-area trio

.safe-top {
  padding-top: env(safe-area-inset-top);
}
.tab-bar {
  padding-bottom: env(safe-area-inset-bottom);
}

Covers the iPhone notch and home-indicator areas automatically.

Fallback syntax

.footer {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

If the environment value is missing, the fallback is used.

Only first argument required

env(<custom-ident>, <fallback>): first arg (the name) is required; second is optional fallback.

Practical combo

.bottom-bar {
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
}

TL;DR

• env(safe-area-inset-...) = device edge values.
• Great for Notch-spacing navigation bars.
• Provide fallbacks: env(x, 0px).
• Use with calc()/max() for safe math.