🌍 env() — Accessing Environment Variables in CSS

🌐 What is env() in CSS?

env() is a CSS function that allows you to accessenvironment variables provided by the browser or operating system. These variables help layouts adapt to special device features such as **notches, safe areas, foldable screens, keyboard insets, and system UI overlays**.

>>“env() gives CSS awareness of device environments — perfect for modern mobile layouts.”

Note

✔ Fully supported on mobile browsers (iOS Safari, Chrome Android, etc.)
✔ Ideal for safe-area insets, foldable screens, immersive UI

🎯 Why Use env()?

  • Handle iPhone notches & rounded corners
  • Prevent content from being hidden under system UI bars
  • Support full-screen apps with safe padding
  • Adapt to foldable screens and dynamic UI insets
  • Create notch-aware headers, footers, and navbars

📌 Syntax

env() Syntax

env(<environment-variable>, <fallback>?)

The optional fallback value is used when a browser does not support that environment variable.

📐 Common Environment Variables

VariableMeaning
safe-area-inset-topSpace at top (iPhone notch area)
safe-area-inset-rightSpace on right edge
safe-area-inset-bottomSpace at bottom (gesture bar area)
safe-area-inset-leftSpace on left edge

Note

📱 These are MOST used for iPhones with notches and gesture navigation bars.

🧪 Example 1 — Safe Area Padding

Safe Area Padding

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

Ensures your UI never overlaps with device notches or system bars.

🧪 Example 2 — Using Fallback Values

Fallback Usage

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

On unsupported browsers, padding defaults to 16px.

🧪 Example 3 — Fullscreen App Layout

Fullscreen Safe Area

body {
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
}

Ideal for fullscreen PWAs or mobile-first web apps.

📱 Example 4 — Fixed Navbar with Notch Support

Notch-Aware Navbar

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  background: #000;
}

The navbar automatically extends below the notch.

🧠 How env() Works Internally

The browser reads device-specific safe areas or system UI geometries and injects their values into CSS. If the variable doesn’t exist → fallback is used → or value becomes 0.

>>“env() enables CSS layouts that respond to real physical device constraints.”

🧩 env() vs constant()

iOS Safari originally used constant(); it is now deprecated. Always use env(), which is the official standardized function.

📐 Advanced: Foldable Screens & Dual Displays

Foldable Device Example

.content {
  padding-right: env(fold-right, 0px);
}

For foldable devices, browsers may expose additional environment variables like hinge areas or folding lines.

⚠️ Common Mistakes

  • ❌ Using env() without providing fallbacks
  • ❌ Forgetting that values may be 0 on flat screens
  • ❌ Assuming all devices have safe areas (most desktops don't)
  • ❌ Using env() for layout spacing when no notch exists (creates unexpected blank space)

Note

🧠 Always use fallback values unless the UI is exclusively for notched devices.

🔥 Summary

The env() function allows CSS to adapt to real device environments, improving usability and ensuring content isn't hidden under notches, bars, or fold areas. It is essential for building modern mobile and fullscreen experiences.

>>“env() makes CSS device-aware — a must for mobile-first, notch-safe layouts.”

Learn more →MDN Docs 📘