本文为翻译
注：由于这些特性较新，且目前处于工作草案阶段，本文所描述的许多特性将会发生变化，并且不会在所有浏览器中都可用（部分浏览器已经可用！）
2024年9月13日，CSS工作组发布了CSS值与单位模块第5级（CSS Values and Units Module Level 5）的首个公开工作草案。它是上一级别的扩展，包含了一些有趣的新增内容。
不久前还难以想象的事物正在被纳入规范：随机值、在任何CSS属性（CSS property）中使用HTML元素属性（HTML attribute）作为值、能够在计算中运用顺序……这看起来很有前景。
这些特性中的许多都有一个共性：它们简化了CSS代码。以前需要多个规则或者临时拼凑（hacky）的解决方案才能实现的事情，现在可能用一两行CSS代码就能做到。正如我所说，看起来很有希望。以下是新变化的列表（更多细节如下）：
attr()函数的变更
：使其可用于任何HTML元素属性，并且可在任何CSS属性中使用（而不仅仅是在content属性中）。
calc-size()函数
：在计算中使用诸如auto或min-content等内在值。
新的first-valid()函数
：用于避免CSS自定义属性出现无效值的问题。
新的*-mix()函数族
：带有一种新的比率表示法。
新的*-progress()函数族
：用于计算范围之间、媒体或容器内的进度比率。
借助新的random()和random-item()函数实现随机化
：从范围或列表中返回随机值（终于实现了！）
新的sibling-count()和sibling-index()函数
：根据顺序和数量提供整数值以进行操作。
新的toggle()函数
：用于轻松地对嵌套的HTML元素进行样式设置，可在一组值之间循环切换样式。
新的函数参数表示法（针对以逗号分隔值列表的参数）
：避免在 CSS 函数中因逗号分隔参数而产生歧义。
新的URL修饰符
：对url()请求提供更多控制。
position类型的扩展
：允许使用与流相关的值。
新特性与更新
attr()函数的变更
在CSS中读取HTML元素属性并使用它并不是新鲜事。通过attr()函数已经可以做到这一点，但一个常见的抱怨是其功能有限，只能处理字符串并且仅在content属性中使用。
attr()函数将会进行一些更新，这样任何数据类型的任何HTML元素属性都可以在任何CSS属性中使用。这将会很简单，只需指定类型，如果需要的话，还可以指定一个备用值，以防出现意外情况。
这是一个期待已久的更新，将让许多开发者感到高兴。
使用calc-size()函数进行内在值操作
该模块还引入了一个新函数，能够安全地对内在值（auto、max-content、fit-content等）进行操作。这一特性在CSS过渡（transitions）和动画（animations）中特别有用。
它还添加了新的关键字（size）以提供更多计算灵活性，使其更易于处理尺寸。
既然已经有了calc()函数，为什么还要一个全新的函数呢？正如文档所解释的，这样做是出于向后兼容性和实际原因（例如，在所有情况下实现平滑插值，特别是在按百分比操作时）。
新的first-valid()函数
引入了一种新方法：first-valid()。其思路是向函数传递一个值列表；这些值将被解析，第一个有效的值将被使用。这在处理CSS自定义属性（也称为CSS变量）时将特别有用。
在使用CSS自定义属性时的一个问题是，在声明中，即使实际包含的值无效，它们也被视为有效值。设置备用值也无济于事，备用声明也将被忽略。
通过这种方法，我们可以通过使用first-valid()将所有备用声明合并为一个来简化代码。
新的*-mix()函数族
它还引入了一个新函数mix()，可用于简化不同的*-mix函数。你想要混合颜色吗？你可以使用像color-mix(red 60%, blue)这样的写法，或者更简单的mix(60%, red, blue)也可以达到同样的效果。当我们说到颜色时，我们也可以混合长度、变换函数等。
这种表示法也被扩展到其他*-mix函数族：
如果在进度参数（第一个参数）中未指定缓动函数，则默认应用linear。
新的*-progress()函数族
它们表示给定值从一个起始值到另一个结束值的比例进度。结果是一个介于0和1之间的数字，可用于操作，但在与前面描述的*-mix函数族结合使用时将特别方便。
这个函数族中有三个函数：
progress()：通用的，适用于任何数学函数。
content-progress()：用于容器查询。
CSS中的随机化函数
有趣的设计都有一定程度的随机化，这在CSS中一直是缺失的。但是这个模块引入了两个新函数，它们从列表（random-item()）或范围（random()）中返回随机值。
不再需要使用临时拼凑（hacky）的技巧或依赖其他语言来实现这一点。语法也很直接且强大，还可以按选择器或元素计算随机数。
新的兄弟函数
有时你可能想要根据容器内元素的顺序来提供不同的样式。遗憾的是，在 CSS中不能像这样使用计数器。
随着引入两个返回数字的新函数，使得可以对其进行操作，这个障碍被消除了：
sibling-count()：返回兄弟元素的数量。
sibling-index()：返回元素在兄弟元素列表中的位置/顺序。
不再需要在每个元素上设置自定义属性或编写带有nth-child的单独选择器。
新的toggle()函数
引入了一种在嵌套元素中定义值的便捷新方法。toggle()函数设置元素及其后代将循环使用的值，大大简化了代码。忘记那些复杂的规则或重新定义吧——所有内容都将在一行代码中完成。
例如，想象我们有一个四层嵌套的列表。我们希望奇数层有圆形标记，偶数层有方形标记。我们可以在不同层级使用ul > li ul > li ul > li ul { … }来实现，或者我们可以只做像ul { list - style - type: disc, square; }这样的操作。搞定！
关于这个函数唯一有点让人担心的是它的名字。也许只是我这么觉得，但“toggle”这个词有“二元性”的含义：开/关、是/否——两个值相互切换。toggle()函数可以有任意数量的参数，所以它被命名为“toggle”感觉有点奇怪。
新的函数参数表示法
你可能已经注意到的一件事是，一些新函数（例如，random()或toggle()）可以接受逗号分隔的值列表作为参数。
在这种情况下，我们如何区分一个参数和下一个参数呢？这就是为什么会有针对函数表示法的“逗号升级”提议。这意味着我们可以使用分号（;）而不是逗号（,）来明确地分隔参数。
例如，想象你想要在你的页面上有一个随机的字体系列并指定不同的选项：
所有这些参数都是逗号分隔的值列表。如果我们使用逗号来分隔参数，将会是一团糟。但是使用新的表示法，很容易识别一个参数在哪里结束，下一个参数从哪里开始：
.random-font { font-family : random-item (Times, serif; Arial, sans-serif; Roboto, sans-serif);
position类型的扩展
CSS已经有用于margin、padding和border的逻辑属性——这些值与文本书写方向相关，并且可能因语言而异。现在这被引入到position类型（不要与position属性混淆）。表示位置的属性（例如，background-position、object-position等）可以指定相对于文本流和方向的值。
