CSS 函数 - env()

CSS 中的 env() 函数可用于向 CSS 中的用户定义环境变量添加值，就像 var() 函数和其他自定义属性一样。环境变量通常由用户代理（例如，Web 浏览器）提供，并可用于 CSS 中，以根据各种因素（例如设备特性或用户偏好）调整样式。

环境变量可以用于属性值的任何部分或描述符的任何部分，例如在媒体查询规则中。

可能的值

env() 函数可以具有以下值：

safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left：这些变量通过其距视口边缘的顶部、右侧、底部和左侧内边距来定义一个矩形。
- 这些内边距是放置内容的安全区域，不会被非矩形显示的形状裁剪。
- 对于矩形视口（例如笔记本电脑显示器），该值保持为零。
- 对于非矩形显示（例如手表表盘），这四个值被设置为创建矩形，以便内容在矩形内清晰可见。
titlebar-area-x, titlebar-area-y, titlebar-area-width, titlebar-area-height：用于安装在桌面设备上的 PWA。这些变量不允许内容与窗口控制按钮（最小化、最大化和关闭）重叠。
keyboard-inset-top, keyboard-inset-right, keyboard-inset-bottom, keyboard-inset-left, keyboard-inset-width, keyboard-inset-height：说明了屏幕虚拟键盘外观的详细信息。这些变量通过其距视口边缘的顶部、右侧、底部和左侧内边距来定义一个矩形。宽度和高度内边距是根据其他内边距值测量的。

与其他 CSS 属性不同，用户定义的属性名称区分大小写。

语法

property: env(variable-name, [fallback]);

变量名：环境变量的名称。
[回退值]：（可选）如果未定义环境变量，则使用回退值。

回退值的语法允许使用逗号，就像其他自定义属性一样。但是，如果属性值不支持逗号，则该值被视为无效。

all 属性不会重置用户定义的属性。

CSS env() - 值的组合

以下示例演示了使用 env() 函数以及值 safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom、safe-area-inset-left。

<html>
<head>
<style>
   .text-style {
      background-color: darkblue;
      width: max-content;
      color: white;
      font-size: 25px;
      border: env(SAFE-AREA-INSET-TOP, 10px) inset lightblue;
      padding: 10px;
      padding: env(SAFE-AREA-INSET-TOP, 2.5em)
               env(SAFE-AREA-INSET-RIGHT, 2.5em) 
               env(SAFE-AREA-INSET-BOTTOM, 2.5em) 
               env(SAFE-AREA-INSET-LEFT, 2.5em)
   }
</style>
</head> 
<body>
    <h2>env() function example</h2>
    <p class="text-style">padding added through environment variables</p>
</body>
</html>

打印页面