大家好，我是 Coco。
CSS 工作组于 2024 年 9 月 13 日发布了 CSS 值和单位模块第 5 级（CSS Values and Units Module Level 5）的首个公众工作草案。这个模块描述了 CSS 属性接受的通用值和单位及其语法，并且引入了一些有趣的新特性。
https://www.w3.org/TR/css-values-5/
这些功能中的很多功能都有一个共同点：它们简化了 CSS 代码。以前需要多条规则或复杂解决方案才能实现的功能，现在只需一行或两行 CSS 即可实现。
注意：目前这些特性仍在工作草案阶段，很多内容可能会发生改变，且尚未在所有浏览器中实现。
attr() 函数的变化
使用 attr() 读取属性并在 CSS 中使用并不是什么新鲜事了。但之前它的功能非常有限，只能与content 属性一起使用，并且只能处理字符串。
现在，attr() 函数进行了一波增强，可以在任何属性中使用任意数据类型的属性值。只需指定类型，并在需要时设置一个备用值即可。
示例代码：
.element {
width: attr(data-width px, 100px); /* 如果 `data-width` 不存在或无效，则使用100px */
}
使用 calc-size() 函数处理内在值
模块还引入了一个新函数，可以安全地操作内在值（例如 auto、max-content、fit-content 等）。这在过渡和动画中还是比较有用的，这个新函数提供了更多灵活性，使处理尺寸变得更简单。
示例代码：
.element {
width: calc-size(100% + 20px);
}
新的 first-valid() 函数
first-valid() 函数允许传递一系列值，并使用第一个有效值。这在处理 CSS 自定义属性时特别有用。之前，即使自定义属性的值无效，它们也被认为是有效值。现在可以简化代码，将所有备用声明合并成一个 first-valid() 函数。
示例代码：
.element {
color: first-valid(--primary-color, --secondary-color, black);
}
新的 *-mix() 函数家族
模块引入了多个 *-mix 函数，可以简化不同的混合操作。例如，想要混合颜色，可以使用 color-mix(red 60%, blue) 或更简单的 mix(60%, red, blue)。这种语法也扩展到其他混合函数：
calc-mix()color-mix()cross-fade()palette-mix()
示例代码：
.element {
color: mix(50%, red, blue); /* 混合红色和蓝色，比例为50% */
}
新的 *-progress() 系列函数
这些函数表示一个值从起始值到终值的比例进度，结果是一个介于0和1之间的数值。这在与 *-mix 函数结合使用时特别有用。
progress(): 通用进度media-progress(): 媒体特性进度content-progress(): 容器查询进度
示例代码：
.element {
opacity: progress(20%, 0, 1); /* 计算元素透明度的进度 */
}
CSS 中的随机化函数
模块引入了两个新函数，返回一个列表中的随机值（random-item()）或一个范围内的随机值（random()）。
示例代码：
.element {
color: random-item(red, blue, green);
}
以后再也不需要依赖其他语言或使用复杂的技巧来实现随机化了。
新的兄弟元素函数
有时我们可能希望根据容器内元素的顺序提供不同的样式，本次引入了两个新函数：
sibling-count(): 返回兄弟元素的数量sibling-index(): 返回元素在兄弟元素列表中的位置
示例代码：
.element {
margin-left: calc(sibling-index() * 10px); /* 根据元素的顺序设置左边距 */
}
新的 toggle() 函数
toggle() 函数简化了嵌套元素的样式定义，可以让元素及其后代循环切换一组值，极大简化了代码。
示例代码：
ul {
list-style-type: toggle(disc, square); /* 奇数层次使用圆点，偶数层次使用方块 */
}
参数的新功能语法
一些新函数可以接受逗号分隔的值列表。为避免参数分隔的歧义，提出了“逗号升级”的方案，可以使用分号（;）而不是逗号（,）分隔参数。
示例代码：
.random-font {
font-family: random-item(Times, serif; Arial, sans-serif; Roboto, sans-serif);
}
定位类型的扩展
CSS已经有了 margin、padding 和 border 的逻辑属性，这些属性相对于文本书写方向，可能会随着语言变化而变化。现在，这种逻辑也引入了定位类型（不是指 position 属性，而是指示位置的属性，如 background-position、object-position 等）。
新值：
x-startx-endy-starty-endblock-startblock-endinline-startinline-end
示例代码：
.element {
background-position: block-start center;
}
大家觉得哪个最实用？欢迎在评论区留言。
点赞和在看是最大的支持 ⬇️❤️⬇️
