CSS env()函数

CSS env()函数用于在CSS中引用环境变量的值。 环境变量是在运行时定义的，通常取决于用户的操作系统和浏览器设置。

语法

env(var-name, fallback-value)

• var-name：环境变量的名称。
• fallback-value：如果环境变量未定义，则使用的默认值。

示例

以下是应用env()函数的示例。 假设我们希望在我们的CSS中使用一个变量，该变量的值取决于用户的首选色彩方案（轻色/暗色）。 我们可以定义两个CSS变量作为备用值。 然后，我们可以使用env()函数来引用这些变量。 如果环境变量未定义，则将使用备用值。

:root {
  --primary-color-light: #1E88E5;
  --primary-color-dark: #1976D2;
}

button {
  background-color: env(scheme(primary-color-light, primary-color-dark));
}

在上面的示例中，我们使用env()函数来引用名为“scheme”的环境变量。 在这种情况下，我们根据用户首选的色彩方案（轻色或暗色）引用备用值。 我们传递两个备用值（显式引用两种颜色），如果环境变量未定义，它将选择其中一个。

浏览器支持情况

目前，env()函数在现代浏览器中都有良好的支持。 它支持Firefox，Chrome，Safari和Edge等大多数现代浏览器。 但由于Internet Explorer的支持原因，我们必须提供回退值，以确保兼容性。

结论

CSS env()函数提供了一种简单的方法来引用从用户的操作系统和浏览器设置中提取的环境变量的值。 它可以帮助我们在制作多主题网站时轻松实现轻/暗色主题，而无需在运行时进行复杂的逻辑操作。