The env()
CSS function can be used to insert the value of a user agent-defined environment variable into your CSS, in a similar fashion to the var()
function and custom properties. The difference is that, as well as being user-agent defined rather than user-defined, environment variables are globally scoped to a document, whereas custom properties are scoped to the element(s) on which they are declared.
To tell the browser to use the whole available space on the screen, and so enabling us to use the env()
variables, we need to add a new viewport meta value:
<meta name="viewport" content="viewport-fit=cover" />
body { padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); }
In addition, unlike custom properties, which cannot be used outside of declarations, the env()
function can be used in place of any part of a property value, or any part of a descriptor (e.g. in Media query rules). As the spec evolves, it may also be usable in other places such as selectors.
Originally provided by the iOS browser to allow developers to place their content in a safe area of the viewport, the safe-area-inset-*
values defined in the specification can be used to help ensure content is visible even to viewers using non‑rectangular displays.
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);
Values
safe-area-inset-top
,safe-area-inset-right
,safe-area-inset-bottom
,safe-area-inset-left
- The
safe-area-inset-*
variables are four environment variables that 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. For rectangular viewports, like your average laptop monitor, their value is equal to zero. For non-rectangular displays — like a round watch face — the four values set by the user agent form a rectangle such that all content inside the rectangle is visible.
Note: Unlike other CSS properties, user agent-defined property names are case-sensitive.
Formal syntax
env( <custom-ident> , <declaration-value>? )
Examples
The below example makes use of the optional second parameter of env()
, which allows you to provide a fallback value in case the environment variable is not available.
<p> If the <code>env()</code> function is supported in your browser, this paragraph’s text will have 50px of padding between it and the left border — but not the top, right and bottom. This is because the accompanying CSS is the equivalent of <code>padding: 0 0 0 50px</code>, because, unlike other CSS properties, user agent property names are case-sensitive. </p>
p { width: 300px; border: 2px solid red; padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px); }
Example values
padding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */ padding: env(Safe-area-inset-bottom, 50px); /* 50px because UA properties are case sensitive */ padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */ padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */
The syntax of the fallback, like that of custom properties, allows commas. But, if the property value doesn't support commas, the value is not valid.
Note: User agent properties are not reset by the all property.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Environment Variables Module Level 1 The definition of 'env()' in that specification. |
Editor's Draft | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
env() | Chrome Full support 69 | Edge Full support 79 | Firefox Full support 65 | IE No support No | Opera Full support 56 | Safari
Full support
11.1
| WebView Android Full support 69 | Chrome Android Full support 69 | Firefox Android Full support 65 | Opera Android Full support 48 | Safari iOS
Full support
11.3
| Samsung Internet Android Full support 10.0 |
Legend
- Full support
- Full support
- No support
- No support
- 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.