Draft
This page is not complete.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The env() CSS function can be used to insert the value of an environment variable, which is global to a particular document, unlike custom property. The env() function can then be used to substitute the value into arbitrary locations, similar to the var() function.

The env() function can be used in place of any part of a value in any property on any element, or any part of a value in any descriptor on any at-rule, and in several other places where CSS values are allowed.

Syntax

env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

Values

safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
The safe area inset variables are four inset variables, which define a rectangle by its top, right, bottom, and left insets from the edge of the viewport which is safe to put content into without risking it being cut off by the shape of a non‑rectangular display.

Formal syntax

env( <custom-ident> [, <declaration-value> ]? )

Specifications

Specification Status Comment
CSS Environment Variables Module Level 1
The definition of 'env()' in that specification.
Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome No support NoEdge ? Firefox Full support 65IE ? Opera ? Safari Full support 11.1
Full support 11.1
No support 11 — 11
Alternate Name
Alternate Name Uses the non-standard name: constant
WebView Android ? Chrome Android Full support 69Edge Mobile ? Firefox Android Full support 65Opera Android ? Safari iOS Full support 11.1
Full support 11.1
No support 11 — 11
Alternate Name
Alternate Name Uses the non-standard name: constant
Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Uses a non-standard name.
Uses a non-standard name.

See also

Document Tags and Contributors

Contributors to this page: ExE-Boss, Sheppy, jhpratt, mfuji09, nhoizey
Last updated by: ExE-Boss,