CSS 封装：2023 年！

CSS 已封装的页眉

CSS 包装：2023 年！

跳转到内容：

哇！2023 年对 CSS 来说是重要的一年！

从 #Interop2023 到 CSS 和界面领域的许多新登陆功能，这些功能让开发者曾经认为在 Web 平台上无法实现的功能。现在，每个现代浏览器都支持容器查询、subgrid、:has() 选择器以及大量新的颜色空间和函数。Chrome 支持 CSS 单纯的滚动驱动的动画，并且支持通过视图过渡在网页视图之间流畅地添加动画。最重要的是，为了改善开发者体验（例如 CSS 嵌套和作用域样式），许多新基元现已推出。

今年真是非比寻常的一年！因此，在这一具有里程碑意义的一年，我们谨此致敬，感谢并感谢浏览器开发者和网络社区为实现这一切而付出的辛勤努力。

架构基础

我们先来了解一下核心 CSS 语言和功能的更新。这些功能是编写和整理样式的基础，并为开发者带来巨大的能力。

三角函数

浏览器支持

  • 111
  • 111
  • 108
  • 15.4

来源

Chrome 111 增加了对三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 的支持，使其适用于所有主流引擎。这些函数对于动画和布局来说非常方便。例如，现在你可以更轻松地在所选中心周围的圆圈上布置元素。

三角函数演示

详细了解 CSS 中的三角函数。

复杂的第 n-* 选择

浏览器支持

  • 111
  • 111
  • 113
  • 9

借助 :nth-child() 伪类选择器，您可以按索引选择 DOM 中的元素。使用 An+B 微语法，您可以精确控制要选择哪些元素。

默认情况下，:nth-*() 伪代码会将所有子元素都考虑在内。从 Chrome 111 开始，您可以选择将选择器列表传递到 :nth-child() 和 :nth-last-child()。这样一来，您就可以在 An+B 执行操作之前预先过滤子级列表。

在下面的演示中，通过使用 of .small 对小玩偶进行预过滤，3n+1 逻辑仅应用于它们。使用下拉菜单可动态更改所使用的选择器。

复杂的 n-* 选择演示

详细了解复杂的第 n-* 项选择。

镜

浏览器支持

  • 118
  • 118
  • x
  • 17.4

Chrome 118 增加了对 @scope 的支持，该 @ 规则可让您将选择器的范围限定为文档的特定子树。借助作用域样式，您可以非常明确地选择哪些元素，而不必编写过于具体的选择器或将它们与 DOM 结构紧密耦合。

限定了范围的子树由范围根（上限）和可选的范围限制（下限）定义。

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

作用域块内放置的样式规则只会定位剪出的子树内的元素。例如，以下作用域样式规则仅定位到位于 .card 元素和任何与 [data-component] 选择器匹配的嵌套组件之间的 <img> 元素。

@scope (.card) to ([data-component]) {
  img { … }
}

在下面的演示中，由于所应用的范围限制，轮播组件中的 <img> 元素不匹配。

范围演示屏幕截图

@scope 演示的参考屏幕截图

范围实时演示

CSS @scope 演示

如需详细了解 @scope，请参阅“如何使用 @scope 限制选择器的覆盖面”一文。在本文中，您将了解 :scope 选择器、特异性的处理方式、无前导范围以及 @scope 对级联的影响。

嵌套

浏览器支持

  • 120
  • 120
  • 117
  • 17.2

来源

在嵌套之前，每个选择器都需要单独进行显式声明。这会导致重复、大量样式表以及分散的创作体验。现在，可以继续创建选择器，并将相关样式规则分组到其中。

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

嵌套抓屏

经验积累现场演示

更改宽松的嵌套选择器，以决定比赛的获胜者

嵌套可以减少样式表的权重，减少重复选择器的开销，并集中管理组件样式。此语法最初发布时存在一项限制，要求在多个位置使用 &，但从那以后通过嵌套放宽语法更新得以解除。

详细了解嵌套。

子网格

浏览器支持

  • 117
  • 117
  • 71
  • 16

来源

借助 CSS subgrid，您可以创建更复杂的网格，并在子布局之间更好地对齐。它允许位于另一个网格内的网格将外部网格的行和列用作自己的，方法是使用 subgrid 作为网格行或列的值。

子网格抓屏

子网格现场演示

页眉、正文和页脚均与其同级项的动态尺寸对齐。

subgrid 特别适合用来将同级项彼此对齐的动态内容。这样一来，文案人员、用户体验文案人员和翻译人员就不必尝试创建“适合”布局的项目文案。您可以使用 subgrid，调整布局以适应内容。

详细了解 subgrid。

排版

2023 年，网络排版出现了几项重大更新。text-wrap 属性是一项特别实用的渐进式增强功能。此属性可调整排版布局，无需其他脚本即可在浏览器中编写而成。告别尴尬的行字长度，体验更具可预测性的排版！

首字母

浏览器支持

  • 110
  • 110
  • x
  • 9

来源

Chrome 110 年初在 Chrome 110 中推出了 initial-letter 属性，这是一项虽然小巧但功能强大的 CSS 功能，用于为首字母的位置设置样式。您可以调整字母的放置位置，使其变为向下或凸起。该属性接受两个参数：第一个参数表示将字母放到相应段落中的深度，第二个参数表示将字母放到相应段落中的高度。您甚至可以结合以上方式使用，如以下演示所示。

首字母屏幕截图

首字母缩写词演示的屏幕截图

首字母演示

更改 ::first-letter 伪元素的 initial-letter 值，观察其偏移。

详细了解首字母。

text-wrap：平衡和美观

作为开发者，您并不知道标题或段落的最终大小、字体大小，甚至语言。浏览器实现有效和美观处理文本换行所需的所有变量均存储在浏览器中。由于浏览器确实了解所有因素（例如字体大小、语言和分配区域），因此它非常适合用于处理高级、优质文本布局。

这时，两种新的文本换行技术便应运而生，一种称为 balance，另一种称为 pretty。balance 值旨在打造和谐的文本块，而 pretty 则旨在防止孤立字符并确保正常的断字。传统上，这两项任务都是手动完成的，如果将这项工作分配给浏览器，让它支持任何已翻译的语言，真的是太棒了。

文本换行抓屏

文本换行现场演示

在以下演示中，您可以通过拖动滑块来比较 balance 和 pretty 对标题和段落的效果。不妨尝试将演示翻译成其他语言！

详细了解 text-wrap: balance。

颜色

2023 年是 Web 平台蓬勃发展的一年。借助支持动态配色主题的新颜色空间和函数，没有什么可以阻挡您创建用户值得拥有的鲜明生动的主题，也可使它们进行自定义！

高清色彩空间（颜色级别 4）

浏览器支持

  • 111
  • 111
  • 113
  • 15

来源

浏览器支持

  • 111
  • 111
  • 113
  • 15

来源

从硬件到软件，再从 CSS 到闪烁的灯光；我们的计算机需要完成很多工作才能尝试呈现出人眼所能看到的同样好颜色。2023 年，我们推出了新的颜色、更多颜色、新的颜色空间、颜色函数和新功能。

CSS 和颜色现在可以： - 检查用户的屏幕硬件是否能够支持广色域 HDR 颜色。 - 检查用户的浏览器能否理解颜色语法，例如 Oklch 或 Display P3。 - 在 Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ 等中指定 HDR 颜色。 - 使用 HDR 颜色创建渐变效果， - 在替代颜色空间中插入渐变效果。 - 使用 color-mix() 混合颜色。 - 使用相对颜色语法创建颜色变体。

颜色 4 抓屏

颜色 4 演示

在下面的演示中，您可以通过拖动滑块来比较 `balance` 和 `ready` 对标题和段落的效果。不妨尝试将演示翻译成其他语言！

详细了解颜色 4 和颜色空间。

color-mix 函数

浏览器支持

  • 111
  • 111
  • 113
  • 16.2

来源

混合颜色是一项经典任务，在 2023 年，CSS 也可以做到这一点。您不仅可以将白色或黑色混合到颜色中，还可以将透明度混合到颜色中，并且可以在您选择的任何颜色空间中完成所有这些操作。它既是一种基本颜色功能，也是一种高级颜色功能。

color-mix() 抓屏

color-mix() 演示

借助演示，您可以使用颜色选择器选择两种颜色、颜色空间，以及每种颜色在组合中应占多大比例。

您可以将 color-mix() 视为渐变中的时刻。渐变色会显示从蓝色转换为白色需要的所有步骤，而 color-mix() 仅显示一步。一旦你开始考虑颜色空间，并了解混合颜色空间与结果之间的差异，情况就越来越深入了。

详细了解 color-mix()。

相对颜色语法

相对颜色语法 (RCS) 是对 color-mix() 的补充，用于创建颜色变体。它比 color-mix() 稍微强大，但对颜色的使用策略也不同。color-mix() 可能会混入白色调亮颜色，在这种情况下，RCS 可以精确访问亮度通道，并能够对通道使用 calc()，以编程方式降低或调高亮度。

RCS 抓屏

RCS 实时演示

改变颜色，改变场景。每种颜色都使用相对颜色语法根据基色创建变体。

RCS 可让您对颜色执行相对和绝对操作。相对变化是指使用当前饱和度或亮度的值并使用 calc() 进行修改。绝对变化是指将通道值替换为全新的值，例如将不透明度设为 50%。此语法为您提供了实用的主题设置工具，例如时间变体等。

详细了解相对颜色语法。

自适应设计

自适应设计于 2023 年发展变化。这一开创性的一年启用了多项新功能，这些功能完全改变了我们构建响应式 Web 体验的方式，并开创了基于组件的自适应设计的新模式。容器查询和 :has() 的组合支持具有以下特征的组件：具有自适应和逻辑样式，这些样式取决于其父项的大小以及其任何子项的存在或状态。这意味着，您最终可以将页面级布局与组件级布局分离开来，只需编写一次逻辑，便可在所有地方使用该组件！

调整容器查询大小

浏览器支持

  • 105
  • 105
  • 110
  • 16

来源

容器查询支持查询网页中的父元素，而不是使用视口的全局尺寸信息来应用 CSS 样式。这意味着，您可以在多个布局和多个视图中为组件设置动态样式。今年情人节（2 月 14 日），容器大小查询在所有现代浏览器中变得稳定。

如需使用此功能，请先在要查询的元素上设置包含关系，然后（与媒体查询类似）将 @container 与尺寸参数搭配使用以应用样式。除了容器查询，您还可以获得容器查询大小。在以下演示中，容器查询大小 cqi（表示内嵌容器的大小）用于调整卡片标头的大小。

@container 抓屏

@container 演示

详细了解如何使用容器查询。

设置容器查询样式

浏览器支持

  • 111
  • 111
  • x
  • x

来源

在 Chrome 111 中，样式查询已部分实现。目前，借助样式查询，您可以在使用 @container style() 时查询父元素上的自定义属性的值。例如，查询是否存在自定义属性值，或查询是否已设置为特定值，例如 @container style(--rain: true)。

样式查询屏幕截图

样式容器查询天气卡片的演示屏幕截图

样式查询演示

改变颜色，改变场景。每种颜色都使用相对颜色语法根据基色创建变体。

虽然这听起来类似于在 CSS 中使用类名称，但样式查询有一些优势。第一个是，通过样式查询，您可以根据伪状态的需要更新 CSS 中的值。此外，在未来版本的实现中，您还可以查询值的范围，以确定应用的样式（例如 style(60 <= --weather <= 70)），以及根据“属性-值”对（例如 style(font-style: italic)）来确定样式。

详细了解如何使用样式查询。

:has() 选择器

浏览器支持

  • 105
  • 105
  • 121
  • 15.4

来源

近 20 年来，开发者一直寻求在 CSS 中使用“父级选择器”。现在，借助 Chrome 105 中随附的 :has() 选择器，可以实现这一目的。例如，使用 .card:has(img.hero) 时，系统会选择以主打图片为子级的 .card 元素。

:has() 演示屏幕截图

:has() 演示的参考屏幕截图

:has() 现场演示

CSS :has() 演示：不含图片/含图片的卡片

由于 :has() 接受相对选择器列表作为其参数，因此您可以选择除父元素之外的其他元素。使用各种 CSS 组合器，您不仅可以向上访问 DOM 树，还可以进行旁向选择。例如，li:has(+ li:hover) 会选择当前悬停的 <li> 元素前面的 <li> 元素。

:has() 抓屏

:has() 演示

CSS :has() 演示：基座

详细了解 CSS :has() 选择器。

更新媒体查询

浏览器支持

  • 113
  • 113
  • 102
  • 17

来源

借助 update 媒体查询，您可以使界面适应设备的刷新频率。该功能可以报告 fast、slow 或 none 值，这些值与不同设备的功能相关。

您设计的大多数设备都可能具有较快的刷新率。这包括桌面设备和大多数移动设备。电子阅读器和设备（如低功耗支付系统）的刷新频率可能较慢。了解设备无法处理动画或频繁更新意味着您可以减少耗电量或错误的视图更新。

更新抓屏

更新演示

模拟（通过选择电台选项）更新速度值，并查看它对闪避的影响。

详细了解 @media（更新）。

为媒体查询编写脚本

浏览器支持

  • 120
  • 120
  • 113
  • 17

来源

脚本媒体查询可用于检查 JavaScript 是否可用。这对于渐进增强非常实用。在发布此媒体查询之前，用于检测 JavaScript 是否可用的策略是在 HTML 中放置 nojs 类，然后使用 JavaScript 将其移除。这些脚本可以移除，因为 CSS 现在可以检测 JavaScript 并进行相应调整。

了解如何在页面上通过 Chrome 开发者工具启用和停用 JavaScript 以供测试，请点击此处。

脚本抓屏

脚本演示

假设有一个网站上的主题切换，由于没有 JavaScript 可用，脚本化媒体查询有助于使切换针对系统偏好设置进行工作。或者，考虑使用 switch 组件 - 如果可以使用 JavaScript，开关就可以通过手势滑动，而不只是打开和关闭。如果脚本可用，就会有大量提升用户体验的绝佳机会；如果脚本已停用，则可以提供有意义的基础体验。

详细了解脚本。

降低透明度的媒体查询

浏览器支持

  • 118
  • 118
  • x

来源

非不透明界面可能会引起头痛，或者因各种类型的视力缺陷而造成视觉障碍。因此，Windows、macOS 和 iOS 具有可以降低或移除界面透明度的系统偏好设置。针对“prefers-reduced-transparency”的媒体查询非常适合使用其他偏好设置媒体查询，这让您既能发挥创意，又能根据用户进行调整。

低透明度抓屏

透明度降低演示

在某些情况下，您可以提供备用布局，该布局不要让内容叠加在其他内容之上。在其他情况下，可将颜色的不透明度调整为不透明或近不透明。下面的博文中包含更多富有启发性的演示，这些演示可以根据用户偏好进行调整。如果您想了解此媒体查询何时有价值，可以带他们一探究竟。

详细了解 @media (prefers-reduced-transparency)。

交互

互动是数字体验的基石。它可以帮助用户获取有关他们点击的内容以及他们在虚拟空间中所处的位置的反馈。今年，Google 推出了许多激动人心的功能，让互动的编写和实现变得更轻松，实现流畅的用户体验历程和更精细的网络体验。

视图转换

浏览器支持

  • 111
  • 111
  • x
  • x

来源

视图过渡对页面的用户体验具有巨大的影响。借助 View Transitions API，您可以在单页应用的两个页面状态之间创建视觉过渡。这些转换可以是整页转换，也可以是网页上的较小的任务，如在列表中添加或移除新项。

View Transitions API 的核心是 document.startViewTranstion 函数。传入将 DOM 更新为新状态的函数，此 API 会为您处理一切。为此，它会拍摄前后快照，然后在两者之间转换。通过使用 CSS，您可以控制要捕获的内容，还可以视需要自定义这些快照的动画效果。

VT 抓屏

VT 演示

观看 Transitions 演示

Chrome 111 中提供的适用于单页应用的 View Transitions API。详细了解视图转换。

线性加/减速函数

浏览器支持

  • 113
  • 113
  • 112
  • 17.2

别被此函数的名称所欺骗。借助 linear() 函数（不要与 linear 关键字混淆），您可以通过简单的方式创建复杂的加/减速函数，同时损失一些精度。

在 Chrome 113 中推出 linear() 之前，您无法在 CSS 中创建弹跳或弹簧效果。得益于 linear()，我们可以估算这些加/减速选项，方法是将它们简化为一系列点，然后在这些点之间进行线性插值。

弹跳加/减速曲线的图表，其中添加了几个点
以蓝色显示的原始弹跳曲线通过以绿色显示的一组关键点简化而成。linear() 函数使用这些点并在它们之间进行线性插值。

线性加/减速抓屏

线性加/减速演示

CSS linear() 演示。

详细了解 linear()。如需创建 linear() 曲线，请使用线性加/减速生成器。

滚动结束

浏览器支持

  • 114
  • 114
  • 109
  • x

来源

许多界面包含滚动交互，有时界面需要同步与当前滚动位置相关的信息，或根据当前状态提取数据。在 scrollend 事件之前，您必须使用不准确的超时方法，该方法可能会在用户手指仍在屏幕上时触发。借助 scrollend 事件，您可以实现精确计时的 scrollend 事件，从而了解用户是否仍在使用手势。

滚动结束抓屏

滚动结束演示

这对于浏览器而言非常重要，因为 JavaScript 无法在滚动过程中跟踪手指在屏幕上的活跃状态，信息就是无法获得。现在可以删除大量不准确的滚动结束尝试代码，并将其替换为浏览器拥有的高精度事件。

详细了解 scrollend。

滚动驱动的动画

浏览器支持

  • 115
  • 115
  • x

来源

滚动条驱动的动画是 Chrome 115 中提供的一项激动人心的功能。通过这两个属性，您可以获取现有的 CSS 动画或使用 Web Animations API 构建的动画，并将其与滚动条的滚动偏移量相结合。当您在水平滚动条中上下滚动或左右滚动时，关联的动画会以直接响应的方式向前和向后拖动。

借助 ScrollTimeline，您可以跟踪滚动条的整体进度，如以下演示所示。当您滚动到网页末尾时，文字会逐个字符显示。

SDA 抓屏

SDA 演示

CSS 滚动驱动的动画演示：滚动时间轴

借助 ViewTimeline，您可以在元素穿过滚动端口时对其进行跟踪。这与 IntersectionObserver 跟踪元素的方式类似。在下面的演示中，每张图片从进入滚动窗口的那一刻开始展示，直到位于中心位置。

SDA 演示版抓屏

SDA 现场演示

CSS 滚动驱动的动画演示：查看时间轴

由于滚动驱动的动画可与 CSS 动画和 Web Animations API 配合使用，因此您可以受益于这些 API 带来的所有优势。这包括使这些动画在主线程之外运行的能力。现在，您只需添加几行额外的代码，即可拥有由滚动驱动、在主线程之外运行、丝滑顺滑的动画 - 不喜欢什么呢？

如需详细了解滚动条驱动的动画，请参阅这篇文章（其中包含所有详细信息）或访问 scroll-driven-animations.style，其中包含许多演示。

延迟时间轴附加功能

浏览器支持

  • 116
  • 116
  • x
  • x

来源

通过 CSS 应用滚动驱动的动画时，查找控制滚动条的查询机制会始终向上遍历 DOM 树，因而仅限于滚动祖先实体。然而，需要添加动画效果的元素通常不是滚动条的子元素，而是位于完全不同的子树中的元素。

若要允许动画元素查找非祖先实体的已命名滚动时间轴，请在共享父项上使用 timeline-scope 属性。这样，就可以将已定义的具有该名称的 scroll-timeline 或 view-timeline 附加到其中，从而赋予其更广泛的范围。执行此操作后，该共享父项的任何子项都可以使用具有该名称的时间轴。

在共享的父项上使用时间轴作用域的 DOM 子树的可视化效果
在共享父级上声明 timeline-scope 后，使用滚动条作为 animation-timeline 的元素可以找到滚动条上声明的 scroll-timeline

演示版抓屏

现场演示

CSS 滚动驱动的动画演示：延迟时间轴附加

详细了解 timeline-scope。

离散属性动画

2023 年的另一个新功能是能够为离散动画添加动画效果，例如在 display: none 之间添加动画效果。从 Chrome 116 开始，您可以在关键帧规则中使用 display 和 content-visibility。您还可以在 50% 点而不是 0% 点转换任何离散属性。这可通过使用 allow-discrete 关键字的 transition-behavior 属性或作为简写形式在 transition 属性中实现。

离散动画。抓屏

离散动画。演示

详细了解如何转换离散动画。

@starting-style

浏览器支持

  • 117
  • 117
  • x
  • x

来源

@starting-style CSS 规则以新的 Web 功能为基础，用于在 display: none 之间添加动画效果。此规则可用于为元素指定“before-open”样式，让浏览器在元素打开网页之前查询该样式。这对于进入动画以及在弹出式窗口或对话框等元素内添加动画效果非常有用。如果您要创建元素并想为其提供动画效果，此功能也非常有用。下面的示例以动画方式呈现 popover 属性（参见下一部分），使其从视口外平滑地进入视图和顶层。

@starting-style 抓屏

@starting-style 演示

详细了解 @starting-style 和其他条目动画。

重叠式

浏览器支持

  • 117
  • 117
  • x
  • x

来源

可以将新的 CSS overlay 属性添加到过渡中，使具有顶层样式的元素（例如 popover 和 dialog）能够顺畅地从顶层以动画形式呈现。如果您未使用叠加效果，您的元素会立即恢复为经过剪裁、转换和覆盖的状态，并且您不会看到过渡效果。同样，overlay 可让 ::backdrop 在添加到顶层元素后平滑地添加动画效果。

叠加抓屏

重叠式实时演示

详细了解叠加层和其他退出动画。

组件

2023 年是样式和 HTML 组件交集的重要一年，popover 实现，并且围绕锚点定位和样式下拉菜单的未来发展做出了许多工作。这些组件可让您更轻松地构建常见的界面模式，而无需依赖其他库或每次从头开始构建自己的状态管理系统。

弹出式窗口

浏览器支持

  • 114
  • 114
  • 17

来源

Popover API 可帮助您构建叠加在页面其余部分上的元素。这些内容可能包括菜单、选项和提示。若要创建简单的弹出式窗口，您可以向弹出的元素添加 popover 属性和 id，然后使用 popovertarget="my-popover" 将其 id 属性连接到调用按钮。Popover API 支持：

  • 提升到顶层。弹出式窗口将显示在页面其余部分之上的单独一层中，这样您就不必再调整 Z-index 了。
  • 轻度关闭功能。点击弹出式窗口区域以外的位置会关闭弹出式窗口并返回焦点。
  • 默认的焦点管理。打开弹出式窗口会使下一个标签页停止在弹出式窗口内显示。
  • 无障碍键盘绑定。点按 esc 键或进行双重切换会关闭弹出式窗口并返回焦点。
  • 可访问的组件绑定。从语义上将弹出式窗口元素连接到弹出式窗口触发器。

弹出式窗口抓屏

弹出式窗口现场演示

选定中的水平规则

今年，Chrome 和 Safari 推出了另一项 HTML 小变化，那就是将水平规则元素（<hr> 标记）添加到 <select> 元素中，以帮助在视觉上拆分内容。以前，直接将 <hr> 标记放入 select 中是不会呈现的。但今年，Safari 和 Chrome 都支持此功能，从而更好地分隔 <select> 元素中的内容。

选择屏幕截图

Chrome 中采用浅色和深色主题的所选 hr 的屏幕截图

选择现场演示

详细了解如何使用“小时”选项

:user-valid 和无效伪类

浏览器支持

  • 119
  • 119
  • 88
  • 16.5

来源

:user-valid 和 :user-invalid 今年在所有浏览器中都很稳定，其行为与 :valid 和 :invalid 伪类类似，但仅在用户与输入进行大量互动后才与表单控件匹配。必填且空的表单控件将匹配 :invalid，即使用户尚未开始与页面互动也是如此。除非用户更改了输入内容并将其置于无效状态，否则同一控件不会匹配 :user-invalid。

有了这些新的选择器，您不再需要编写有状态代码来跟踪用户已更改的输入。

:user-* 抓屏

:user-* 现场演示

详细了解如何使用 user-* 表单验证伪元素。

专属手风琴

浏览器支持

  • 120
  • 120
  • x
  • 17.2

Web 上常见的界面模式是手风琴组件。为了实现这种模式，您需要组合几个 <details> 元素，通常直观地将它们分组，以表明它们属于一起。

Chrome 120 中的新功能支持在 <details> 元素上使用 name 属性。使用此属性时，具有相同 name 值的多个 <details> 元素会形成语义组。组中最多只能有一个元素同时打开：当您打开组中的某个 <details> 元素时，之前打开的那个元素将自动关闭。这种类型的手风琴称为独占手风琴。

独家手风琴演示

专属手风琴式折叠所含的 <details> 元素不必是同级元素。它们可能分散在文档中。

总结

CSS 在过去几年（尤其是 2023 年）经历了如此多的复兴。如果您是 CSS 新手或只想复习一下基础知识，请访问 web.dev，查看我们的免费学习 CSS 课程以及提供的其他免费课程。

祝您节日快乐，并期待您很快就能在工作中融入部分出色的 CSS 和界面功能！

⇾ Chrome 界面开发技术推广团队

Una Kravets
Bramus
Adam Argyle
Adam Argyle
X GitHub