iphone 刘海屏的出现一度使得如何适配刘海屏成为了前端开发者面临的新问题，虽然个人并不认可这种方式的全面屏，并且也无意要去为适配做任何工作。但是我关心由它引出的一个 CSS 新特性：CSS 环境变量，因为 safe-area-inset 被列入了 CSS 环境变量中。虽然目前只处于草案阶段，只有极少数浏览器支持，但是我们有必要提前了解一下。

环境变量一般是在操作系统中会用到的一个词，表示全局参数，而浏览器也相当于一个微型的操作系统，所以 CSS 环境变量的存在也是说得通的。

那么既然我们已经有了 CSS 变量，为什么还需要环境变量呢？复习一下我们前面讲过的 CSS 变量

.box {
  --color: #DDD;
}

.box {
  --color: #DDD;
  background-color: var(--color);
  border-color: var(--color);
}

所以，CSS 变量是有限制的，只能在当前选择器内部使用，即便是全局变量也存在级联关系。此外，CSS 变量不能用于 @media 这样的选择器中，比如这样用是无效的

:root {
  --breakpoint: 600px;
}

@media (min-width: var(--breakpoint)) {
  /* 无效 */
}

CSS 环境变量正好能解决这些问题，它可以在任何选择器中随意使用，需要注意的是，CSS 环境变量是全局一次定义，之后不能再被修改。

既然是变量就分为定义和使用，除了 safe-area-inset 这样的内置环境变量，开发者还可以定义自己的环境变量，只不过具体怎么定义还没有定下来。

环境变量的使用很简单

env('变量名', FALLBACK_VALUE);

比如

body {
  padding-top: env(safe-area-inset-top, 12px);
  padding-right: env(safe-area-inset-right, 12px);
  padding-bottom: env(safe-area-inset-bottom, 12px);
  padding-left: env(safe-area-inset-left, 12px);
}

目前 CSS 环境变量只有新版的 Chrome、Safari 和 Opera 浏览器支持，让我们期待它的逐步完善吧。