“这是我参与更文挑战的第12天，活动详情查看： 更文挑战”
在 CSS 的世界里面，:root、CSS 变量、var()、env() 是经常一起碰到的几个概念。温故而知新，下面一起学习一下用法。
:root
CSS :root 伪类选择器匹配文档树的根元素。在 HTML 文档中，:root 表示 html 选择器， 除了CSS权重比它高以外，其他都是一样的。
:root {
background-color: blue;
}
html {
background-color: yellow;
}
最终文档的背景色将会是 blue。
自定义属性(CSS 变量） 及 var()
自定义属性(CSS 变量）
带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性(很多时候也称之为 CSS 变量），其可以通过 var() 函数在其他声明中复用。
自定义属性的范围限定在声明它们的元素上，并参与级联：此类自定义属性的值来由级联算法声明决定。
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
注意：IE 不支持此属性
var()
CSS函数 var() 可以用自定义属性的值替换另外一个属性值的任何一部分。
注意：IE 不支持此属性
语法
var( <custom-property-name> , <declaration-value>? )
第一个属性不存在时，使用第二个兜底值。
示例：var() + CSS 变量 基本用法
在 :root 上定义，然后使用它
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
最终 body 的颜色会是 pink 的。
示例：var() 回退值
当第一个值未定义，回退值生效。
.component {
--text-color: #080;
}
/* 在 component 的样式中使用它： */
.component .text {
color: var(--text-color, black); /* 此处 color 正常取值 --text-color */
}
.component .header {
color: var(--header-color, blue);
/* header-color 并没有被设定, 此处 color 被回退到 blue */
}
示例：CSS 变量的优先级
示例：
<body>
<div class="outWrapper">
<div class="innerWrapper"></div>
</div>
<style>
:root {
--bg-color: blue;
}
body {
display: flex;
overflow: hidden;
--bg-color: yellow;
}
.outWrapper {
width: 200px;
height: 200px;
/* 将会是 yellow */
background-color: var(--bg-color);
}
.innerWrapper {
--bg-color: green;
width: 100px;
height: 100px;
/* 将会是 green */
background-color: var(--bg-color);
}
</style>
</body>
示例：CSS 变量区分大小写
注意：自定义属性是区分大小写的，--my-color 和 --My-color 会被认为是两个不一样的属性。
<div class="outWrapper">
<div class="innerWrapper"></div>
</div>
<style>
:root {
--bg-color: green;
--Bg-color: yellow;
}
.outWrapper {
width: 200px;
height: 200px;
/* 将会是 green */
background-color: var(--bg-color);
}
.innerWrapper {
width: 100px;
height: 100px;
/* 将会是 yellow */
background-color: var(--Bg-color);
}
</style>
具体参考 Custom properties (--*): CSS variables
env()
env() CSS 函数以类似于 var 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。
env() 和 var() 区别在于:
- 定义方不同：环境变量由
user-agent定义，自定义属性可以由用户定义外 - 作用域不同： 环境变量是全局作用在文档中， 自定义属性则限定在声明它们的元素
为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量，我们需要添加一个新的视口元值：
<meta name="viewport" content="viewport-fit=cover" />
其语法和 var() 一致
env( <custom-ident> , <declaration-value>? )
示例
body {
padding:
env(safe-area-inset-top, 20px)
env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px)
env(safe-area-inset-left, 20px);
}
最初由iOS浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。
具体参考 MDN 文档 env()
