读取属性并在 CSS 中使用它并不新鲜。使用 attr() 已经是可能的，但一个常见的抱怨是功能性有限，只能在 content 中使用字符串。

attr() 函数将进行一些更新，因此可以在任何属性中使用任何数据属性，而不受其数据类型的限制。只需指定类型，如果需要的话，还可以指定一个备用值，以防出现意外情况。

这是一个备受期待的更新，将让许多开发人员感到高兴。

该模块还引入了一个新函数，能够安全地处理固有值（auto、max-content、fit-content 等）。这是一个在过渡和动画中特别有帮助的功能。

它还添加了新的关键字（size），以提供更多灵活性的计算，使大小计算更加容易。

为什么要有一个全新的函数，当已经有 calc() 了呢？正如文档解释的那样，这样做是有向后兼容性和实际原因的（例如，在所有情况下都进行平滑插值，特别是在百分比中进行运算时）。

引入了一种新方法：first-valid()。其思想是将一系列值传递给函数；这些值将被解析，第一个有效值将被使用。在处理 CSS 自定义属性（也称为 CSS 变量）时，这将特别有用。

在操作 CSS 变量时的一个问题是，在声明中，它们被视为有效值，即使实际包含的值不是有效的。设置备用值也不会有所帮助，备用声明也将被忽略。

通过这种方法，我们可以通过 first-valid() 将所有备用声明合并到一个声明中，从而简化代码。

还引入了一个新函数 mix()，可用于简化不同的 *-mix 函数。想要混合颜色吗？你可以做类似 color-mix(red 60%, blue) 这样的事情，或者更简单的 mix(60%, red, blue) 也可以。而且当我们说到颜色时，我们也可以混合长度、变换函数等。

这种表示法也扩展到其他 *-mix 函数系列：

• calc-mix()

• color-mix()

• cross-fade()

• palette-mix()

如果在进度参数（第一个参数）中未指定缓动函数，则默认将应用 linear。

它们表示给定值从起始值到结束值的比例进度。结果是一个介于 0 和 1 之间的数字，可用于操作，但与先前描述的 *-mix 函数系列结合使用时尤其方便。

这个系列中有三个函数：

• progress()：通用，适用于任何数学函数。

• media-progress()：用于媒体特性。

• content-progress()：用于容器查询。

有趣的设计中有一定程度的随机性，这在 CSS 中一直缺失。但是这个模块引入了两个新函数，可以从列表中返回随机值（random-item()）或在范围内返回随机值（random()）。

不再需要巧妙的技巧或依赖其他语言来实现这一点。语法简单而强大，还可以通过选择器或元素计算随机数。

有时，您可能希望根据容器内元素的顺序提供不同的样式。不幸的是，在 CSS 中不能像这样使用计数器（我会把这个抱怨留到另一天）。

通过引入两个返回数字的新函数，使得可以操作这些数字，这个障碍被消除了：

• sibling-count()：返回兄弟节点的数量。

• sibling-index()：返回元素在兄弟节点列表中的位置/顺序。

不再需要在每个元素上设置自定义属性或编写具有 nth-child 的单独选择器。

引入了一种方便的新方法来定义嵌套元素中的值。toggle() 函数设置元素及其后代将循环遍历的值，大大简化了代码。忘掉复杂的规则或重新定义 - 一切都将在一行代码中完成。

例如，假设我们有一个具有四个嵌套级别的列表。我们希望奇数级别具有圆点，偶数级别为方块。我们可以在不同级别上进行一些 有趣 的操作，或者我们只需执行类似 ul { list-style-type: disc, square; } 这样的操作。完成！

关于这个函数唯一令人担忧的是它的名称。也许只是我，但“toggle”一词具有“二元性”内涵：开/关，是/否 - 两个值之间切换/切换。toggle() 函数可以有任意多个参数，因此感觉奇怪它被命名为“toggle”。

您可能已经注意到一些新函数（例如 random() 或 toggle()）可以接受逗号分隔值列表作为参数。

在这些情况下，我们如何区分一个参数和另一个参数？这就是为什么对于函数符号提出了“逗号升级”的建议。这意味着我们可以使用分号（;）而不是逗号（,）来明确分隔参数。

例如，想象一下您想在页面上有一个随机的 font-family 并指定不同的选项：

• Times, serif

• Arial, sans-serif

• Roboto, sans-serif

所有这些参数都是逗号分隔值列表。如果我们使用逗号来分隔参数，那将是一团糟。但是通过新的符号，很容易识别一个参数何时结束，下一个参数何时开始：

.random-font {
  font-family: random-item(Times, serif; Arial, sans-serif; Roboto, sans-serif);
}

CSS 已经为 margin、padding 和 border 提供了逻辑属性 - 这些值是相对于文本书写方向的，并且可能会从一种语言变为另一种语言。

现在，这也适用于位置类型（不要与 position 属性混淆）。指示位置的属性（例如 background-position、object-position 等）可以指定相对于文本流和方向的值。

可以使用的新值包括：

• x-start

• x-end

• y-start

• y-end

• block-start

• block-end- inline-start

• inline-end