CSS 环境变量

当所有关于 “刘海屏”和 iPhone X 的争论都过去时，我们都接触到了 CSS 中的 env() 函数。苹果公司帮助我们将内容从这些“不安全”区域移开的方法是为我们提供了基本上是硬编码的变量来使用。

padding: 
  env(safe-area-inset-top) 
  env(safe-area-inset-right) 
  env(safe-area-inset-bottom) 
  env(safe-area-inset-left);

呃，好吧！很奇怪！现在，九个月后，env() 的“非正式提案草案” 已经发布。据我了解，这就是规范的工作方式。有时浏览器供应商会推动他们需要的功能，然后将其标准化。它并不总是等待标准机构发明东西，然后浏览器供应商实现这些东西。

环境变量是否值得我们兴奋？当然！从某种意义上说，它们类似于 CSS 自定义属性 的更受限制的版本，但这意味着它们可以潜在地用于更多的事情。

CSS 环境变量正在被标准化：https://#/QKFBM3WFT2
允许获取和使用浏览器和作者定义的变量：排版、颜色、刘海和其他特定的布局/设备值。
它们在媒体查询中有效，而 CSS 自定义属性不能在媒体查询中使用。 pic.twitter.com/FWrPiBiAqp

— Serg Hospodarets (@malyw) 2018年4月29日

👀 CSS 中全局 env() 变量的全新规范： https://#/6YfXWFTyhN

忘记刘海屏吧，这里重要的是能够将 CSS 变量与级联分离。这对于 ① 性能/代码组织 ② 非常棒，因为你可能能够在媒体查询中使用它们！

— Eric Portis (@etportis) 2018年4月30日

Eric 还提出了一些非常棒的早期想法

问题 4 – 定义 env() 可以使用的所有位置。

• 例如，应该能够替换 MQ 语法的任何子集。
• 也许能够替换选择器？
• 它是否应该在规则级别工作，以便您可以将任意内容插入规则中，例如重用声明块？

可能仍然可以通过 JavaScript 进行更改。我认为 CSS 自定义属性不能与媒体查询和选择器等一起使用的主要原因是它们确实与级联一起工作，这会打开一些非常奇怪的无限循环逻辑，因此 CSS 不想涉足。

如果您喜欢 PostCSS，则可以使用 一个插件！但是我要提醒您……预处理 CSS 自定义属性遇到的相同问题 也适用于此（除了那篇文章中的第一个问题）。