CSS 中的 11 个新特性和功能

注意：由于它是最新的并且目前处于工作草案的状态，本文中描述的许多功能将会发生变化，并且它们不会在所有浏览器中可用（有些是！）。

2024 年 9 月 13 日，CSS 工作组发布了CSS 值和单位模块第 5 级的第一个公共工作草案。它是上一级别的扩展，包含一些有趣的新增内容。

不久前还无法想象的事情正在进入规范：随机值、使用属性作为任何属性的值、能够在计算中使用顺序......看起来很有希望。

这些功能都有一个共同点：简化了 CSS 代码。以前需要多条规则或一些 hack 方案才能实现的功能，现在只需一两行 CSS 代码即可实现。正如我所说，它看起来非常有前景。以下是新变化的列表（更多详情见下文）：

• attr()功能变化：因此它可以与任何属性和任何 CSS 属性一起使用（不仅仅是内容）。
• calc-size()功能：在计算中使用内在值，例如 auto 或 min-content。
• 新的 first-valid() 函数可避免自定义属性具有无效值的问题。
• 新的 *-mix() 函数系列具有新的比率符号。
• 新的 *-progress() 函数系列用于计算范围之间或媒体或容器内的进度比。
• 使用新功能random()和random-item()函数进行随机化，从范围或列表中返回随机值（终于！）
• 新的sibling-count()函数sibling-index()提供整数值，根据顺序和大小进行操作。
• 用于设置嵌套元素样式的新toggle()功能可轻松循环遍历值列表。
• 带有逗号分隔值列表的参数的新功能符号，以避免因逗号分隔参数而产生的歧义。
• 新的 URL 修饰符可以对 url() 请求提供更多的控制。
• 扩展位置类型以允许流相关值。

新功能和更新

attr()功能变更

在 CSS 中读取属性并使用它并不是什么新鲜事。在 CSS 中已经可以实现这一点attr()，但一个常见的抱怨是功能有限，只能处理字符串和 CSS 中的属性content。

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

这是一个期待已久的更新，它将会让很多开发人员感到高兴。

使用内在价值进行运算calc-size()

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

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

既然已经有了函数，为什么还要新增一个呢calc()？正如文档所解释的，这样做既是为了向后兼容，也是为了实际原因（例如，在所有情况下都能实现平滑插值，尤其是在百分比运算时）。

新first-valid()功能

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

使用 CSS 变量时的一个问题是，在声明中，即使实际包含的值无效，它们也会被视为有效值。设置 fallback 值也无济于事，fallback 声明也会被忽略。

通过这种方法，我们可以将所有后备声明合并为一个，从而简化代码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()) 中返回随机值。

无需再使用 hack 技巧或依赖其他语言来实现。语法简单易懂，功能强大，并且可以通过选择器或元素计算随机数。

新的同级函数

有时你可能希望根据容器内元素的顺序提供不同的样式。不幸的是，计数器在 CSS 中无法这样使用（这个问题留到以后再说）。

通过引入两个返回数字的新函数，可以对它们进行操作，这个障碍就被消除了：

• sibling-count()：返回兄弟姐妹的数量。
• sibling-index()：返回元素在兄弟列表中的位置/顺序。

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

新toggle()功能

引入了一种便捷的新方法来定义嵌套元素中的值。该toggle()函数设置元素及其后代元素将循环使用的值，从而显著简化代码。告别复杂的规则或重新定义——所有操作只需一行代码即可完成。

例如，假设我们有一个包含四层嵌套的列表。我们希望奇数层包含圆盘，偶数层包含正方形。我们可以ul > li ul > li ul > li ul { ... }在不同的层级上做一些有趣的事情，或者像下面这样直接操作ul { list-style-type: disc, square; }。Boom！搞定！

这个函数唯一有点让人担心的是它的名字。也许只有我一个人觉得“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);
}

职位类型扩展

marginCSS 已经具有、padding和 的逻辑属性border——这些值与文本书写方向相关，并且可能因语言不同而变化。

现在，位置类型（不要与position属性混淆）也引入了此功能。指示位置的属性（例如background-position、object-position等）可以指定与文本流向和方向相关的值。

可以使用的新值有：

• x-start
• x-end
• y-start
• y-end
• block-start
• block-end
• inline-start
• inline-end

结论

它仍处于早期阶段，情况会发生变化，但 CSS 值和单位模块级别 5 中包含的一些新特性和功能看起来非常有前景。

有些功能也是期待已久的！尤其是可以将任意属性 (Attribute) 与任意属性 (Property) 一起使用。我记得很久以前在规范中看到过这个选项。希望这能成为实现它所需的动力。

别忘了查看CSS 值和单位模块 5 级工作草案，了解更多详情和信息。如有任何疑问或意见，请在其 GitHub 仓库提交工单。

祝您 (CSS) 实验和编码愉快！