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]);

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

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

用户定义的属性不会被所有属性重置。

CSS env（） - 值的组合

以下示例演示了如何使用值为 safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom、safe-area-inset-left 的 env（） 函数：


<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>

打印本页