CSS 环境变量

CSS 环境变量

介绍

CSS 环境变量(Enviroment Variables)和 CSS 自定义属性(Custom Properties)类似,前者的存在是为了解决后者的一些局限性问题。

CSS 环境变量在语法上和自定义属性一样,可以有 User Agent 或开发者创建。

尽管草案上说支持由开发者创建环境变量,但并未说明如何创建

现有的环境变量

safe-area-inset

为了适合 iPhone X 系列的 ‘刘海’布局(notch layout)增加了一个环境变量 safe-area-inset

safe-area-inset 变量用于设定安全区域与边界的距离,包含四个预定义的变量

变量名说明
safe-area-inset-top安全区域距离顶部边界距离
safe-area-inset-bottom安全区域距离底部边界距离
safe-area-inset-left安全区域距离左边边界距离
safe-area-inset-right安全区域距离右边边界距离

使用

1
2
constant(''); /* 兼容 iOS < 11.2 */
env('VARIABLE_NME', FALLBACK_VALUE); /* 兼容 iOS >= 11.2 */

参考