此页面由 Cloud Translation API 翻译。

CSS 封装：2023 年！

CSS Wrapped: 2023!

跳转到内容：

哇！2023 年是 CSS 的重要一年！

从 #Interop2023 到 CSS 和界面领域的许多新发布，这些发布都实现了开发者曾经认为在 Web 平台上不可能实现的功能。现在，所有现代浏览器都支持容器查询、子网格、:has() 选择器以及一系列新的颜色空间和函数。Chrome 支持仅使用 CSS 的滚动驱动型动画，并支持使用视图转场在网页视图之间流畅地呈现动画。最重要的是，我们还推出了许多新基元，以便提供更好的开发者体验，例如 CSS 嵌套和作用域样式。

今年真是非比寻常的一年！因此，在这一里程碑之年结束之际，我们想向浏览器开发者和网络社区致敬，感谢他们为此付出的辛勤努力。

架构基础知识

我们先来看看核心 CSS 语言和功能的更新。这些功能对于您编写和整理样式的方式至关重要，并可为开发者提供强大的功能。

三角函数

浏览器支持

来源

Chrome 111 添加了对三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 的支持，使其可在所有主要引擎中使用。这些函数对于动画和布局非常有用。例如，现在，您可以更轻松地在选定中心周围的圆形上排列元素。

三角函数演示

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

复杂的“第 * 个”选择

浏览器支持

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

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

在以下演示中，3n+1 逻辑仅应用于小娃娃，方法是使用 of .small 预先滤除小娃娃。使用下拉菜单动态更改所用的选择器。

复杂的“第 * 个”选择演示

详细了解复杂的“第 * 个”选择。

范围

浏览器支持

来源

Chrome 118 添加了对 @scope 的支持，这是一种 at-rule，可让您将选择器匹配范围限定为文档的特定子树。借助作用域样式，您可以非常具体地选择要选择的元素，而无需编写过于具体的选择器或将其与 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 的影响。

嵌套

浏览器支持

来源

在嵌套之前，每个选择器都需要单独显式声明。这会导致重复、样式表膨胀和散乱的编写体验。现在，选择器可以继续使用分组在内的相关样式规则。

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 */
}

嵌套屏幕录制

嵌套实时演示

更改了放宽嵌套选择器以确定竞态的胜出者

嵌套可以减小样式表格的大小、减少重复选择器的开销，并集中管理组件样式。该语法最初发布时存在限制，需要在多个位置使用 &，但此限制已通过嵌套语法更新而解除。

详细了解嵌套。

子网格

浏览器支持

来源

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

子网格屏幕录制

子网格实时演示

标题、正文和页脚会与其同级元素的动态大小对齐。

子网格对于将同级兄弟元素对齐到彼此的动态内容特别有用。这样一来，文案撰写者、用户体验文案撰写者和译者就不必再尝试制作“适合”于布局的项目文案。借助子网格，您可以调整布局以适应内容。

详细了解子网格。

排版

2023 年，Web 排版发生了一些重大更新。text-wrap 属性是一项非常实用的渐进式增强功能。此属性可在浏览器中组合排版调整，无需额外的脚本。告别不协调的行长，拥抱更可预测的排版！

Initial-letter

浏览器支持

来源

initial-letter 属性是 Chrome 110 年初推出的一项小巧但功能强大的 CSS 功能，可用于设置首字母的放置样式。您可以将字母放置在下沉或上浮状态。此属性接受两个参数：第一个参数用于指定将字母放入相应段落的深度，第二个参数用于指定将字母抬高到相应段落上方的位置。您甚至可以将这两种方法结合使用，如以下演示所示。

首字母屏幕截图

首字母演示

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

详细了解 initial-letter。

text-wrap: balance and pretty

作为开发者，您不知道标题或段落的最终大小、字号甚至语言。浏览器中包含了处理文本换行效果所需的所有变量，这些变量可以让文本换行效果既有效又美观。由于浏览器确实知道字体大小、语言和分配区域等所有因素，因此非常适合处理高级且高质量的文本布局。

这时，我们可以使用两种新的文本换行技术，分别称为 balance 和 pretty。balance 值旨在创建和谐的文本块，而 pretty 旨在防止孤行和确保合理的断词。这两项任务传统上都是手动完成的，现在能够交给浏览器来完成，并且适用于任何翻译语言，这真是太棒了。

文本换行屏幕录制

文本换行实时演示

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

详细了解 text-wrap: balance。

颜色

2023 年是 Web 平台的色彩之年。借助支持动态配色主题的新颜色空间和函数，您可以随心所欲地为用户打造鲜艳丰富的主题，并使其可自定义！

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

浏览器支持

来源

浏览器支持

来源

从硬件到软件，从 CSS 到闪烁的灯光，计算机需要付出大量努力才能尽可能准确地呈现人眼可见的颜色。2023 年，我们将推出新颜色、更多颜色、新的颜色空间、颜色函数和新功能。

CSS 和颜色现在可以： - 检查用户的屏幕硬件是否支持广色域 HDR 颜色。 - 检查用户的浏览器是否支持 Oklch 或 Display P3 等颜色语法。 - 以 Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ 等格式指定 HDR 颜色。 - 使用 HDR 颜色创建渐变， - 在其他色彩空间中插值渐变。 - 使用 color-mix() 混合颜色。 - 使用相对颜色语法创建颜色变体。

Color 4 屏幕录制

Color 4 演示

在以下演示中，您可以通过拖动滑块来比较“balance”和“pretty”对标题和段落的影响。尝试将演示文稿翻译成其他语言！

详细了解 Color 4 和色彩空间。

color-mix 函数

浏览器支持

来源

混合颜色是一项经典任务，在 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() 的组合支持根据父级的大小以及任何子级的存在或状态，为组件提供自适应逻辑样式。这意味着，您终于可以将页面级布局与组件级布局分离开来，只需编写一次逻辑即可在任何地方使用您的组件！

大小容器查询

浏览器支持

来源

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

如需使用此功能，请先在要查询的元素上设置容器，然后（与媒体查询类似），将 @container 与尺寸参数结合使用以应用样式。除了容器查询之外，您还会获得容器查询大小。在以下演示中，容器查询大小 cqi（表示内嵌容器的大小）用于设置卡片标题的大小。

@container 屏幕录制

@container 演示

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

样式容器查询

浏览器支持

来源

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

样式查询屏幕截图

样式查询演示

更改颜色，更改场景。每种颜色都使用相对颜色语法，以基色为基础创建变体。

这听起来与在 CSS 中使用类名称类似，但样式查询有一些优势。首先，借助样式查询，您可以根据需要更新 CSS 中的值以实现伪状态。此外，在未来的实现版本中，您将能够查询值范围，以确定应用的样式（例如 style(60 <= --weather <= 70)）以及基于属性-值对（例如 style(font-style: italic)）的样式。

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

:has() 选择器

浏览器支持

来源

近 20 年来，开发者一直在要求在 CSS 中添加“父级选择器”。现在，借助 Chrome 105 中提供的 :has() 选择器，您可以实现这一点。例如，使用 .card:has(img.hero) 会选择具有主推图片作为子元素的 .card 元素。

:has() 演示屏幕截图

:has() 实时演示

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

由于 :has() 接受相对选择器列表作为参数，因此您可以选择的不仅仅是父元素。使用各种 CSS 组合符，不仅可以向上遍历 DOM 树，还可以进行横向选择。例如，li:has(+ li:hover) 将选择当前悬停的 <li> 元素之前的 <li> 元素。

:has() 屏幕演示

:has() 演示

CSS :has() 演示：Dock

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

更新媒体查询

浏览器支持

来源

借助 update 媒体查询，您可以根据设备的刷新率调整界面。该功能可以报告值 fast、slow 或 none，该值与不同设备的功能相关。

您设计的大多数设备都可能具有较高的刷新率。这包括桌面设备和大多数移动设备。电子书阅读器和低功耗付款系统等设备的刷新率可能会较慢。知道设备无法处理动画或频繁更新，意味着您可以节省电量或避免视图更新出现错误。

更新屏幕录制

更新演示

通过选择单选按钮来模拟更新速度值，并观察其对鸭子的影响。

详细了解 @media（更新）。

使用脚本编写媒体查询

浏览器支持

来源

脚本媒体查询可用于检查 JavaScript 是否可用。这非常适合渐进式增强。在此媒体查询之前，检测 JavaScript 是否可用的方法是将 nojs 类放入 HTML 中，然后使用 JavaScript 将其移除。由于 CSS 现在可以检测 JavaScript 并相应地进行调整，因此可以移除这些脚本。

如需了解如何在网页上启用和停用 JavaScript 以便通过 Chrome DevTools 进行测试，请点击此处。

脚本编写屏幕演示

脚本编写演示

假设您要对网站上的主题进行切换，由于没有可用的 JavaScript，脚本媒体查询可以帮助您根据系统偏好设置进行切换。或者，考虑一下开关组件：如果 JavaScript 可用，则可以使用手势滑动开关，而不仅仅是开启和关闭开关。如果可使用脚本，则有很多机会升级用户体验；如果脚本已停用，则可以提供有意义的基础体验。

详细了解脚本。

降低透明度的媒体查询

浏览器支持

来源

不透明的界面可能会导致头痛，或者对各种类型的视觉缺陷人士来说，视觉上很难看清。因此，Windows、macOS 和 iOS 都提供了系统偏好设置，可减少或移除界面的透明度。适用于 prefers-reduced-transparency 的此媒体查询与其他偏好设置媒体查询非常契合，可让您在发挥创意的同时，根据用户进行调整。

“降低透明度”屏幕录制

降低透明度演示

在某些情况下，您可以提供一种替代布局，其中不会出现内容叠加其他内容的情况。在其他情况下，可以将颜色的不透明度调整为不透明或几乎不透明。以下博文提供了更多能自适应用户偏好的启发性演示，如果您想了解此媒体查询的适用场景，不妨查看这些演示。

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

交互

互动是数字体验的基石。它有助于用户了解自己点击了什么，以及自己在虚拟空间中的所在位置。今年，我们推出了许多令人兴奋的功能，这些功能让互动更易于组合和实现，从而实现顺畅的用户历程和更精致的 Web 体验。

查看转场效果

浏览器支持

来源

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

View Transitions API 的核心是 document.startViewTranstion 函数。传入用于将 DOM 更新为新状态的函数，API 会为您处理一切。它通过拍摄前后对比的快照，然后在两者之间进行过渡来实现此目的。您可以使用 CSS 控制要捕获的内容，并根据需要自定义这些快照的动画方式。

VT 屏幕录制

VT 演示

视图转换演示

适用于单页应用的 View Transitions API 已在 Chrome 111 中发布。详细了解视图转换。

线性缓动函数

浏览器支持

不要被此函数的名称所迷惑。借助 linear() 函数（请勿与 linear 关键字混淆），您可以简单地创建复杂的缓动函数，但代价是会丢失一些精度。

在 Chrome 113 中发布的 linear() 之前，无法在 CSS 中创建弹跳或弹簧效果。借助 linear()，您可以将这些缓动效果简化为一系列点，然后在这些点之间进行线性插值，以近似地实现这些缓动效果。

添加了多个点的弹跳缓动曲线图 — 蓝色原始弹跳曲线通过一组绿色显示的关键点进行了简化。`linear()` 函数会使用这些点，并在它们之间进行线性插值。

线性缓动抓屏

线性缓动演示

CSS linear() 演示。

详细了解 linear()。如需创建 linear() 曲线，请使用线性缓动生成器。

滚动结束

浏览器支持

来源

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

滚动结束抓屏

Scrollend 演示

这对浏览器来说非常重要，因为 JavaScript 无法跟踪滚动期间手指在屏幕上的存在情况，因为系统根本无法获取相关信息。现在，您可以删除不准确的滚动结束尝试代码块，并将其替换为浏览器拥有的高精度事件。

详细了解 scrollend。

滚动条驱动的动画

浏览器支持

来源

滚动条驱动的动画是 Chrome 115 中推出的一项令人兴奋的功能。借助这些 API，您可以使用现有的 CSS 动画或使用 Web 动画 API 构建的动画，并将其与滚动条的滚动偏移量相关联。当您上下滚动（或在水平滚动条中向左或向右滚动）时，关联的动画会直接响应并向前或向后拖动。

借助 ScrollTimeline，您可以跟踪滚动条的整体进度，如以下演示所示。当您滚动到页面底部时，文本会逐个字符显示出来。

SDA 屏幕录制

SDA 演示

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

借助 ViewTimeline，您可以跟踪元素穿过滚动边界的情况。这与 IntersectionObserver 跟踪元素的方式类似。在以下演示中，每个图片从进入滚动窗口到位于中心位置，都会逐渐显示出来。

SDA 演示版抓屏

SDA 实时演示

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

由于滚动驱动型动画可与 CSS 动画和 Web Animations API 搭配使用，因此您可以获享这些 API 带来的所有优势。这包括能够在主线程之外运行这些动画。现在，只需额外添加几行代码，即可在主线程上运行由滚动驱动的流畅动画，这不是很棒吗？

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

延迟的时间轴附件

浏览器支持

来源

通过 CSS 应用滚动驱动型动画时，用于查找控制滚动条的查找机制始终会沿 DOM 树向上遍历，因此仅限于滚动祖先。不过，很多情况下，需要添加动画效果的元素并非滚动条的子元素，而是位于完全不同的子树中的元素。

如需允许动画元素查找非祖先的命名滚动时间轴，请对共享父元素使用 timeline-scope 属性。这样一来，具有该名称的已定义 scroll-timeline 或 view-timeline 便可附加到它，从而使其具有更广泛的范围。完成后，该共享父级的任何子级都可以使用该名称的时间轴。

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

演示版抓屏

实时演示

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

详细了解 timeline-scope。

离散属性动画

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

离散动画抓屏

离散动画演示

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

@starting-style

浏览器支持

来源

@starting-style CSS 规则基于新的 Web 功能，可在 display: none 之间进行动画效果。此规则提供了一种为元素设置“打开前”样式的途径，浏览器可以在元素在页面上打开之前查找该样式。这对于进入动画以及在弹出式窗口或对话框等元素中进行动画处理非常有用。当您创建元素并希望为其添加进入动画效果时，此属性也非常有用。请参考以下示例，其中会为 popover 属性（请参阅下一部分）添加动画，使其从视口外部平滑地进入视图并进入顶层。

@starting-style 屏幕录制

@starting-style 演示

详细了解 @starting-style 和其他进入动画。

重叠式

浏览器支持

来源

您可以将新的 CSS overlay 属性添加到转场中，以便具有顶层样式的元素（例如 popover 和 dialog）能够顺畅地从顶层动画化。如果您不对叠加层进行转换，元素将立即恢复剪裁、转换和遮盖状态，并且您不会看到转换过程。同样，overlay 可让 ::backdrop 在添加到顶层元素后平滑地退出动画。

叠加式抓屏

重叠式广告实时演示

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

组件

2023 年是样式和 HTML 组件交叉领域的重要一年，popover 正式发布，我们围绕锚点定位和下拉菜单样式的未来进行了大量工作。借助这些组件，您可以更轻松地构建常见的界面模式，而无需依赖于其他库或每次从头构建自己的状态管理系统。

浏览器支持

来源

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

提升到顶层。弹出式窗口将显示在页面其余部分上方的单独图层中，因此您无需调整 z-index。
“轻触关闭”功能。点击弹出式窗口区域外部会关闭弹出式窗口并返回焦点。
默认的焦点管理。打开该弹出式窗口后，下一个标签页会停止在弹出式窗口中。
无障碍键盘绑定。按 esc 键或双击即可关闭弹出式窗口并返回焦点。
无障碍组件绑定。在语义上将 popover 元素连接到 popover 触发器。

选择中的水平规则

今年，Chrome 和 Safari 中针对 HTML 进行了另一项小改，即能够在 <select> 元素中添加水平线元素 (<hr> 标记)，以便在视觉上划分内容。以前，将 <hr> 标记放入选择器中根本不会呈现。不过，今年 Safari 和 Chrome 都支持此功能，可更好地分隔 <select> 元素中的内容。

选择屏幕截图

选择“实时演示”

详细了解如何在选择中使用 hr

：用户有效和无效的伪类

浏览器支持

来源

:user-valid 和 :user-invalid 今年在所有浏览器中均已稳定运行，其行为与 :valid 和 :invalid 伪类类似，但只有在用户与输入内容进行了显著互动后，才会与表单控件匹配。必填且空的表单控件将与 :invalid 匹配，即使用户尚未开始与网页互动也是如此。在用户更改输入并将其留在无效状态之前，同一控件不会与 :user-invalid 匹配。

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

:user-* 屏幕录制

:user-* 实时演示

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

专属手风琴式折叠

浏览器支持

网站上常见的界面模式是手风琴组件。如需实现此模式，您需要组合几个 <details> 元素，通常会将它们视觉上分组，以表明它们属于同一组。

Chrome 120 新增了对 <details> 元素上的 name 属性的支持。使用此属性时，具有相同 name 值的多个 <details> 元素会组成一个语义群组。组中一次最多只能打开一个元素：当您打开组中的某个 <details> 元素时，之前打开的元素会自动关闭。这种类型的折叠动作条被称为独占折叠动作条。

独家折叠式动作条演示

属于独占折叠菜单的 <details> 元素不一定是同级兄弟元素。它们可以散布在文档中。

总结

过去几年，CSS 经历了一次复兴，尤其是在 2023 年。如果您刚开始接触 CSS，或者只是想复习一下基础知识，请查看我们的免费 Learn CSS 课程以及 web.dev 上提供的其他免费课程。

祝您节日快乐，并希望您能尽快将这些出色的新 CSS 和界面功能融入到您的工作中！

Chrome 界面开发者关系团队

Una Kravets

Bramus

Adam Argyle

CSS 封装：2023 年！

CSS Wrapped: 2023!

镜重演示屏幕截图

Scope 实时演示

嵌套屏幕录制

嵌套实时演示

子网格屏幕录制

子网格实时演示

排版

首字母屏幕截图

首字母演示

文本换行屏幕录制

文本换行实时演示

Color 4 屏幕录制

Color 4 演示

color-mix() 屏幕录制

color-mix() 演示

RCS 屏幕录制

RCS 实时演示

@container 屏幕录制

@container 演示

样式查询屏幕截图

样式查询演示

:has() 演示屏幕截图

:has() 实时演示

:has() 屏幕演示

:has() 演示

更新屏幕录制

更新演示

脚本编写屏幕演示

脚本编写演示

“降低透明度”屏幕录制

降低透明度演示

VT 屏幕录制

VT 演示

线性缓动抓屏

线性缓动演示

滚动结束抓屏

Scrollend 演示

SDA 屏幕录制

SDA 演示

SDA 演示版抓屏

SDA 实时演示

演示版抓屏

实时演示

离散动画抓屏

离散动画演示

@starting-style 屏幕录制

@starting-style 演示

叠加式抓屏

重叠式广告实时演示

弹出式窗口抓屏

弹出式窗口实时演示

选择屏幕截图

选择“实时演示”

:user-* 屏幕录制

:user-* 实时演示