CSS5 来临？CSS 即将迎来一波新特性！

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() 读取属性并在 CSS 中使用并不是什么新鲜事了。但之前它的功能非常有限，只能与content 属性一起使用，并且只能处理字符串。

现在，attr() 函数进行了一波增强，可以在任何属性中使用任意数据类型的属性值。只需指定类型，并在需要时设置一个备用值即可。

.element {
  width: attr(data-width px, 100px); /* 如果 `data-width` 不存在或无效，则使用100px */
}

模块还引入了一个新函数，可以安全地操作内在值（例如 auto、max-content、fit-content 等）。这在过渡和动画中还是比较有用的，这个新函数提供了更多灵活性，使处理尺寸变得更简单。

.element {
  width: calc-size(100% + 20px);
}

first-valid() 函数允许传递一系列值，并使用第一个有效值。这在处理 CSS 自定义属性时特别有用。之前，即使自定义属性的值无效，它们也被认为是有效值。现在可以简化代码，将所有备用声明合并成一个 first-valid() 函数。

.element {
  color: first-valid(--primary-color, --secondary-color, black);
}

模块引入了多个 *-mix 函数，可以简化不同的混合操作。例如，想要混合颜色，可以使用 color-mix(red 60%, blue) 或更简单的 mix(60%, red, blue)。这种语法也扩展到其他混合函数：

.element {
  color: mix(50%, red, blue); /* 混合红色和蓝色，比例为50% */
}