CSS Environment Variables env()

Overview

Css-env-function is an npm package which contains utilities for environment variables like safe-area-inset-top.

Specifications

CSS Environment Variables Module Level 1 # env-function

Syntax

/* Using the four safe area inset values with no fallback values */
 env(safe-area-inset-top);
 env(safe-area-inset-right);
 env(safe-area-inset-bottom);
 env(safe-area-inset-left);
 /* Using them with fallback values */
 env(safe-area-inset-top, 20px);
 env(safe-area-inset-right, 1em);
 env(safe-area-inset-bottom, 0.5vh);
 env(safe-area-inset-left, 1.4rem);

Code snippets

css-env-function.html

Source:css-env-function.html

index.html

Source:index.html

Browser Compatibility