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.
/* 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);
safe-area-inset-top
,
safe-area-inset-right
,
safe-area-inset-bottom
,
safe-area-inset-left
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.
注意 : Unlike other CSS properties, user agent-defined property names are case-sensitive.
env( <custom-ident> , <declaration-value>? )
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);
}
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.
注意 : User agent properties are not reset by the all 特性。
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Environment Variables Module Level 1
The definition of 'env()' in that specification. |
编者草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
env()
Experimental
|
Chrome 完整支持 69 | Edge 完整支持 79 | Firefox 完整支持 65 | IE 不支持 No | Opera 完整支持 56 |
Safari
完整支持
11.1
|
WebView Android 完整支持 69 | Chrome Android 完整支持 69 | Firefox Android 完整支持 65 | Opera Android 完整支持 48 |
Safari iOS
完整支持
11.3
|
Samsung Internet Android 完整支持 10.0 |
完整支持
不支持
实验。期望将来行为有所改变。
使用非标名称。
var(…)
viewport-fit (@viewport)