11 个即将在 CSS 中推出的全新特性和功能

注意：由于该规范非常新且目前仍处于草案阶段，本文中描述的许多功能可能会发生变化，并且这些功能在所有浏览器中可能不可用（有些浏览器可能支持）。

2024年9月13日，CSS工作组发布了CSS Values and Units Module Level 5的首个公开工作组草案。这是对上一个版本的扩展，包含了一些有趣的新增功能。

不久前还不可想象的事情现在正在被纳入规范：随机值、在任何属性中使用属性作为值、在计算中使用顺序……看起来很有前景。

许多这些特性有一个共同点：它们简化了CSS代码。以前需要多个规则或复杂解决方案的事情现在可以用一两行CSS来实现。正如我所说，这看起来很有前景。以下是一些新的变化列表（更多细节请见下方）：

• attr() 函数的更改：使其可以用于任何属性和任何 CSS 属性（而不仅仅是 content 属性）。
• calc-size() 函数：在计算中使用诸如 auto 或 min-content 这样的固有值。
• 新的 first-valid() 函数，以避免自定义属性无效值的问题。
• *新的 -mix() 函数家族**，使用新的比率表示法。
• *新的 -progress() 函数家族**，用于计算范围内的进度比或媒体或容器内的进度比。
• 使用新的 random() 和 random-item() 函数进行随机化，以从范围或列表中返回随机值（终于！）
• 新的 sibling-count() 和 sibling-index() 函数，提供整数值以根据顺序和大小进行操作。
• 新的 toggle() 函数，用于轻松循环使用一组值来对嵌套元素进行样式设置。
• 新的带逗号分隔值列表的函数表示法，以避免与分隔参数的逗号混淆。
• 新的 URL 修改器，以提供更多对 url() 请求的控制。

• 扩展位置类型，以允许流相对值。

• • *

attr() 函数的更改

读取属性并在CSS中使用它并不是新事物。这已经可以通过 attr() 实现，但一个常见的抱怨是其功能有限，只能处理字符串，并且仅在 content 中有效。

attr() 函数将会进行一些更新，因此任何数据属性（无论其数据类型）都可以用于任何属性。只需指定类型，并且如果需要的话，还可以指定一个备用值，以防万一出现意外情况。

这是一个备受期待的更新，将会让很多开发者感到高兴。

使用 calc-size() 进行固有值运算

此模块还引入了一个新功能，可以安全地操作固有值（如 auto、max-content、fit-content 等）。此功能在过渡和动画中将特别有用。

它还添加了新的关键字（size），以提供更灵活的计算方式，使处理尺寸变得更加容易。

为什么已经有了 calc() 函数还要新增一个功能呢？正如文档所述，这样做有向后兼容性和实际原因（例如，在所有情况下实现平滑插值，特别是在使用百分比时）。

新的 first-valid() 函数

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

在使用CSS变量时，一个问题是在声明中，即使实际包含的值无效，这些变量也会被视为有效值。设置备用值也没有帮助，而且备用声明也会被忽略。

通过这种方法，我们可以简化代码，将所有回退声明合并为一个使用 first-valid() 的单一声明。

新的 *-mix() 函数家族

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

该表示法也扩展到了其他 *-mix 家族的函数中：

• calc-mix()
• color-mix()
• cross-fade()
• palette-mix()

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

新的 *-progress() 函数家族

它们表示给定值从一个起始值到另一个结束值的相对进度。结果是一个介于0和1之间的数字，可以用于运算，但与之前描述的*-mix系列函数结合使用时会特别方便。

这里有三个函数：

• progress(): 通用，适用于任何数学函数。
• media-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()）可以接受用逗号分隔的值列表作为参数。

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

例如，假设你想让你的页面上的字体随机显示，并指定不同的选项：

• 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
• 块开始
• 块结束
• 内联开始
• 内联结束

它仍处于早期阶段，可能会发生变化，但CSS Values and Units Module Level 5中包含的一些新特性和功能看起来非常有前景。

有些功能我们等了很久！特别是使用任何属性与任何属性一起使用的能力。我记得很久以前就在规范中看到过这个选项。希望这能成为推动其实现的动力。

不要忘记查看 CSS Values and Units Module Level 5 Working Draft 以获取更多详细信息和信息。如果你有任何问题或意见，可以在他们的 GitHub 仓库 提交一个 issue。

快乐的 (CSS) 实验和编码！