CSS 和界面的新变化：2023 年 I/O 大会

Una Kravets

Bramus

Adam Argyle

过去几个月里，我们迎来了 Web 界面的黄金时代。许多新平台功能已经推出，并在各大浏览器上迅速采用，可以支持比以往更多的 Web 功能和自定义功能。

以下是最近推出或即将推出的 20 项最令人兴奋且影响力最大的功能：

• 容器查询
• 样式查询
• :has() 选择器
• nth-of 微语法
• text-wrap: balance
• initial-letter
• 动态视口单元
• 广色域颜色空间
• color-mix()
• 嵌套
• 级联层
• 作用域样式
• 三角函数
• 各个转换属性
• popover
• 锚点定位
• selectmenu
• 离散属性转换
• 滚动条驱动的动画
• 查看转场效果

全新自适应广告

我们先来了解一些新的自适应设计功能。借助新的平台功能，您可以使用拥有自适应样式信息的组件构建逻辑界面，构建利用系统功能提供更原生感觉的界面，并通过用户偏好查询让用户参与设计流程，实现完全自定义。

容器查询

浏览器支持

• 105
• 105
• 110
• 16

来源

容器查询最近在所有现代浏览器中都已稳定运行。借助它们，您可以查询父元素的大小和样式，以确定应应用于其任何子元素的样式。媒体查询只能访问和利用视口中的信息，这意味着它们只能在页面布局的宏观视图中发挥作用。另一方面，容器查询是一种更精确的工具，可以支持任意数量的布局或布局中的布局。

在以下收件箱示例中，主要收件箱和收藏边栏都是容器。其中的电子邮件会根据可用空间调整网格布局，并显示或隐藏电子邮件时间戳。这是页面中完全相同的组件，只是显示在不同的视图中

由于我们使用了容器查询，因此这些组件的样式是动态的。如果您调整页面大小和布局，组件会根据各自分配的空间进行响应。边栏变成了占用更多空间的顶部栏，布局看起来更像主要收件箱。如果空间较小，这两项内容都会以压缩格式显示。

如需详细了解容器查询和构建逻辑组件，请参阅这篇文章。

样式查询

浏览器支持

• 111
• 111
• x
• 18

来源

借助容器查询规范，您还可以查询父容器的样式值。目前，Chrome 111 中已部分实现此功能，您可以在其中使用 CSS 自定义属性来应用容器样式。

以下示例使用存储在自定义属性值中的天气特征（例如雨、晴天和多云）来设置卡片的背景和指示器图标的样式。

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

样式查询才刚刚起步。未来，我们将推出布尔值查询，以确定自定义属性值是否存在并减少代码重复，目前正在讨论范围查询，以便根据一系列值应用样式。这样，您就可以使用百分比值来应用此处显示的降雨几率或云量风格。

如需了解详情并查看更多演示，请参阅有关样式查询的博文。

:has()

浏览器支持

• 105
• 105
• 121
• 15.4

来源

说到强大的动态功能，:has() 选择器是新版浏览器中推出的最强大的 CSS 新功能之一。借助 :has()，您可以通过检查父元素是否包含特定子元素，或者这些子元素是否处于特定状态来应用样式。这意味着，我们现在实际上有一个父级选择器。

在容器查询示例的基础上，您可以使用 :has() 让组件变得更加动态。其中，具有“星形”元素的项目会应用灰色背景，具有选中复选框的项目会应用蓝色背景。

不过，此 API 不限于选择父级。您还可以为父级中的任何子元素设置样式。例如，如果商品包含星形元素，则标题会显示为粗体。这可通过 .item:has(.star) .title 完成。使用 :has() 选择器，您可以访问父元素、子元素，甚至同级元素，这使得该 API 非常灵活，每天都有新的用例出现。

注意：为防止大型 DOM 树中的渲染性能变慢，我们建议您尽可能缩小此选择器的范围。例如，使用 :has() 检查根 HTML 元素中的匹配项的速度会比在导航栏或树更小的卡片元素中检查匹配项的速度慢。

如需了解详情并探索更多演示，请参阅介绍 :has() 的这篇博文。

nth-of 语法

浏览器支持

• 111
• 111
• 113
• 9

网站平台现在提供更高级的第 n 个子项选择功能。高级第 n 个子元素语法提供了一个新关键字（“of”），让您可以使用现有的 An+B 微语法，并在其中搜索更具体的子集。

如果您对特殊类使用常规 nth-child（例如 :nth-child(2)），浏览器将选择应用了特殊类且是第二个子元素的元素。这与 :nth-child(2 of .special) 不同，后者会先预过滤所有 .special 元素，然后从该列表中选择第二个元素。

这个 Pen

如需详细了解此功能，请参阅介绍“nth-of”语法的文章。

text-wrap: balance

选择器和样式查询并非我们可以在样式中嵌入逻辑的唯一位置；排版也是一个位置。从 Chrome 114 开始，您可以使用值为 balance 的 text-wrap 属性为标题使用文本换行平衡。

试用演示版

为了使文本保持平衡，浏览器会有效执行二分搜索，以找到不会导致任何额外行数的最小宽度，并在一个 CSS 像素（而非显示像素）处停止。为了进一步减少二分搜索中的步骤，浏览器会从平均线宽的 80% 开始。

试用演示版

注意：虽然这是一个您今天就可以试用的极佳渐进式增强功能，但请务必注意，此 API 最多只能处理 4 行文本，因此非常适合标题和标题，但可能不适用于较长的内容。

如需了解详情，请参阅这篇文章。

initial-letter

浏览器支持

• 110
• 110
• x
• 9

来源

initial-letter 是 Web 排版的另一项重大改进。借助此 CSS 属性，您可以更好地控制内嵌 Drop Cap 样式。

您可以对 :first-letter 伪元素使用 initial-letter 来指定： 根据字母占据的行数来指定字母的大小。字母的块偏移量（也称为“下沉”），表示字母的位置。

如需详细了解如何使用 intial-letter，请点击此处。

动态视口单元

浏览器支持

• 108
• 108
• 101
• 15.4

如今，Web 开发者面临的一个常见问题是，如何准确且一致地调整全视口大小，尤其是在移动设备上。作为开发者，您希望 100vh（100% 的视口高度）表示“与视口一样高”，但 vh 单位不考虑移动设备上的收起导航栏等因素，因此有时会导致其过长而导致滚动。

为解决此问题，我们现在在 Web 平台上提供了新的单位值，包括： - 小视口高度和宽度（或 svh 和 svw），表示最小的有效视口大小。 - 大视口高度和宽度 (lvh 和 lvw)，表示最大尺寸。- 动态视口高度和宽度 (dvh 和 dvw)。

当其他动态浏览器工具栏（例如顶部的地址栏或底部的标签页栏）可见或不可见时，动态视口单位的值会发生变化。

注意：请注意，动态视口单位不会考虑虚拟键盘的存在。从 Chrome 108 开始，您可以设置元标记来更改此行为。

如需详细了解这些新单位，请参阅大型、小型和动态视口单位。

广色域色彩空间

浏览器支持

• 111
• 111
• 113
• 15.4

来源

Web 平台的另一项重要新功能是宽色域色彩空间。在 Web 平台上推出宽色域色彩之前，您可以拍摄色彩鲜艳的照片，并在新型设备上查看，但无法让按钮、文本颜色或背景与这些鲜艳的值相匹配。

显示一系列图片在宽色域和窄色域之间转换，说明色彩鲜艳度及其效果。
亲自试用

但现在，我们在 Web 平台上提供了一系列新的颜色空间，包括 REC2020、P3、XYZ、LAB、OKLAB、LCH 和 OKLCH。如需了解新的 Web 颜色空间等内容，请参阅 HD 颜色指南。

您可以在开发者工具中立即看到颜色范围的扩展情况，白线标示了 sRGB 范围的结束位置和更广色域范围的开始位置。

还有更多用于颜色的工具！还不要错过我们对渐变效果做出的诸多改进。Adam Argyle 还开发了一款全新工具，可帮助您试用新的 Web 颜色选择器和渐变色构建器，您可前往 gradient.style 试用该工具。

color-mix()

浏览器支持

• 111
• 111
• 113
• 16.2

来源

color-mix() 函数用于展开扩展的颜色空间。此函数支持混合两个颜色值，以根据要混合的颜色的通道创建新值。混合时使用的色彩空间会影响结果。在 oklch 等感知度更高的颜色空间中工作，所获得的颜色范围与 srgb 等颜色空间不同。

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

试用演示版

color-mix() 函数提供了一项用户一直在请求的功能：能够保留不透明的颜色值，同时为其添加一些透明度。现在，您可以在创建不同不透明度的颜色变体时使用品牌颜色变量。具体方法是将颜色与透明度混合。将品牌颜色蓝色与 10% 透明度混合后，您将获得 90% 不透明的品牌颜色。您可以了解如何通过此方法快速构建颜色系统。

您现在可以在 Chrome 开发者工具中查看此功能的运作方式，样式窗格中有一个非常棒的预览 Venn 图标。

如需查看更多示例和详细信息，请参阅我们的关于 color-mix 的博文，或试用此 color-mix() Playground。

CSS 基础

构建能够明显提升用户体验的新功能只是其中一部分，但 Chrome 中推出的许多功能旨在改善开发者体验，并打造更可靠、更井然有序的 CSS 架构。这些功能包括 CSS 嵌套、级联层、作用域样式、三角函数和各个转换属性。

嵌套

浏览器支持

• 120
• 120
• 117
• 17.2

来源

CSS 嵌套是 Sass 的一大亮点，也是多年来 CSS 开发者最迫切的需求之一，如今终于登陆 Web 平台。通过嵌套，开发者可以使用更简洁的分组格式进行编写，从而减少冗余。

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

您还可以嵌套媒体查询，这也意味着您可以嵌套容器查询。在以下示例中，如果卡片的容器宽度足够，则会将卡片从纵向布局更改为横向布局：

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

当容器中的内嵌空间大于或等于 480px 时，系统会将布局调整为 flex。浏览器只会在满足条件时应用该新展示样式。

如需了解详情和示例，请参阅我们关于 CSS 嵌套的文章。

级联层

浏览器支持

• 99
• 99
• 97
• 15.4

来源

我们发现的另一个开发者痛点是确保哪种样式优先于其他样式保持一致，而解决此问题的部分方法是更好地控制 CSS 级联。

层级叠加可解决此问题，因为它允许用户控制哪些层的优先级高于其他层，从而更精细地控制样式的应用时间。

探索 Codepen 上的项目。

如需详细了解如何使用级联图层，请参阅这篇文章。

作用域 CSS

浏览器支持

• 118
• 118
• 
• 17.4

来源

借助 CSS 作用域样式，开发者可以指定特定样式的应用边界，从本质上讲，是在 CSS 中创建原生命名空间。以前，开发者依赖第三方脚本来重命名类，或者使用特定的命名惯例来防止样式冲突，但很快，您就可以使用 @scope。

在这里，我们将 .title 元素的范围限定为 .card。这样可以防止该标题元素与页面上的任何其他 .title 元素（例如博文标题或其他标题）发生冲突。

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

您可以在以下实时演示中看到带有作用域限制的 @scope 以及 @layer：

如需详细了解 @scope，请参阅 css-cascade-6 规范。

三角函数

浏览器支持

• 111
• 111
• 108
• 15.4

来源

另一项新的 CSS 管道是将三角函数添加到现有的 CSS 数学函数中。这些函数现在在所有现代浏览器中都已稳定运行，可让您在 Web 平台上创建更自然的布局。一个很好的示例是这个放射状菜单布局，现在可以使用 sin() 和 cos() 函数进行设计和动画处理。

在下面的演示中，圆点围绕一个中心点旋转。每个点都沿 X 轴和 Y 轴进行平移，而不是围绕自己的中心旋转，然后向外移动。X 轴和 Y 轴上的距离是分别考虑 --angle 的 cos() 和 sin() 后确定的。

这个 Pen

如需详细了解此主题，请参阅我们的关于三角函数的文章。

单个转换属性

浏览器支持

• 104
• 104
• 72
• 14.1

来源

随着各个转换函数的不断改进，开发者的工作效率也不断提升。自上次举办 I/O 大会以来，各个转换在所有现代浏览器中都已稳定运行。

过去，您需要依赖于 transform 函数来应用子函数来缩放、旋转和平移界面元素。这需要进行大量重复操作，尤其是在动画的不同时间应用多个转换时，更是令人沮丧。

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

现在，您可以通过分离转换类型并单独应用它们，在 CSS 动画中实现所有这些细节。

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

这样，在动画的不同时间段内，平移、旋转或缩放的变化可以同时发生，并且变化速率也不同。

如需了解详情，请参阅介绍各个转换函数的博文。

可自定义的组件

为确保我们能够通过 Web 平台解决一些关键的开发者需求，我们与 OpenUI 社区群组合作，并确定了三个初始解决方案：

1. 内置的弹出式窗口功能，包含事件处理脚本、声明式 DOM 结构和可访问的默认值。
2. 用于将两个元素相互连接以实现锚点定位的 CSS API。
3. 可自定义的下拉菜单组件，适用于您想要为选择控件中的内容设置样式的情况。

弹出式窗口

Popover API 为元素提供了一些很棒的内置浏览器支持功能，例如：

• 支持顶层，这样您就不必管理 z-index。当您打开弹出式窗口或对话框时，您会将该元素提升到页面顶部的特殊层。
• auto 弹出式窗口中免费提供轻关闭行为，因此当您点击元素外部时，弹出式窗口会关闭并从无障碍功能树中移除，同时焦点会得到妥善管理。
• 对 popover 目标和 popover 本身的连接组织的默认无障碍功能。

这一切意味着只需编写较少的 JavaScript 就能创建所有这类功能，并跟踪所有这些状态。

弹出式窗口的 DOM 结构是声明式的，编写起来非常清晰，就像为弹出式窗口元素添加 id 和 popover 属性一样。然后，将该 ID 同步到用于打开 popover 的元素（例如具有 popovertarget 属性的按钮）：

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover 是 popover=auto 的简写。具有 popover=auto 的元素在打开时会强制关闭其他 popover，在打开时会获得焦点，并且可以轻松关闭。反之，popover=manual 元素不会强制关闭任何其他元素类型，也不会立即获得焦点，也不会轻松关闭。它们通过切换开关或其他关闭操作关闭。

如需查看有关弹出式窗口的最新文档，请访问 MDN。

锚点定位

弹出式窗口也经常用于对话框和提示等元素，这些元素通常需要锚定到特定元素。请看以下事件示例。点击日历活动后，系统会在您点击的活动附近显示一个对话框。日历项是锚点，而弹出式窗口是用于显示活动详情的对话框。

您可以使用 anchor() 函数创建居中显示的提示，并使用锚点的宽度将提示放置在锚点 x 位置的 50%。然后，使用现有定位值应用其余的展示位置样式。

但是，如果根据您设置的定位方式，弹出式窗口无法适合视口，该怎么办呢？

为了解决这个问题，Anchor Positioning API 提供了可供自定义的后备位置。以下示例会创建一个名为“top-then-bottom”的后备位置。浏览器会先尝试将提示定位到顶部，如果它不适合视口，那么浏览器就会将提示定位到锚点元素下方，也就是底部。

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

这个笔记

注意：您可以在此处进行非常精细的设置，这可能会导致代码冗长，但这也是库和设计系统编写定位逻辑的机会，以便您在任何地方重复使用该逻辑。

如需详细了解锚定定位，请参阅这篇博文。

<selectmenu>

借助弹出式窗口和锚点定位，您可以构建完全可自定义的选择菜单。OpenUI 社区群组一直在研究这些菜单的基本结构，并寻找允许自定义其中任何内容的方法。请参考以下直观示例：

如需构建最左侧的 selectmenu 示例，其中彩色圆点与日历活动中显示的颜色相对应，您可以按如下方式编写：

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

离散属性转换

为了让所有这些操作都能顺利地让弹出式窗口展开和收起，Web 需要某种方法来为离散属性添加动画效果。这些是过去通常无法进行动画处理的属性，例如从顶层到其他层和从 display: none 到其他层的动画。

为了支持为弹出式菜单、选择菜单，甚至对话框或自定义组件等现有元素实现出色的过渡效果，浏览器正在启用新的管道来支持这些动画。

以下 popover 演示使用 :popover-open 为打开状态、@starting-style 为打开前状态，为打开后关闭状态直接将转换值应用于元素，从而为 popover 创建了进入和退出动画。为了让所有这些都适用于显示屏，需要将其添加到 transition 属性中，如下所示：

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

互动次数

接下来我们将介绍互动，这是本 Web 界面功能导览的最后一站。

我们已经讨论了如何为离散属性添加动画效果，但 Chrome 中还推出了一些非常令人兴奋的 API，可用于实现滚动驱动型动画和视图转换

滚动条驱动的动画

浏览器支持

• 115
• 115
• 
• x

来源

借助滚动条驱动的动画，您可以根据滚动容器的滚动位置控制动画的播放。这意味着，当您向上或向下滚动时，动画会向前或向后快进/快退。此外，借助滚动条驱动的动画，您还可以根据元素在滚动容器中的相对位置来控制动画。这样一来，您就可以制作有趣的效果，例如视差背景图片、滚动进度条，以及在进入视图时显示的图片。

此 API 支持一组 JavaScript 类和 CSS 属性，可让您轻松创建声明式滚动驱动动画。

如需通过滚动来驱动 CSS 动画，请使用新的 scroll-timeline、view-timeline 和 animation-timeline 属性。 如需驱动 JavaScript Web Animations API，请将 ScrollTimeline 或 ViewTimeline 实例作为 timeline 选项传递给 Element.animate()

这些新 API 可与现有的 Web Animations API 和 CSS Animations API 搭配使用，这意味着它们可以受益于这些 API 的优势。这包括能够在主线程之外运行这些动画。没错，您没看错：现在，只需额外编写几行代码，即可在主线程上运行由滚动驱动的流畅动画。这有什么不好？

如需有关如何创建这些滚动驱动型动画的详尽深入指南，请参阅这篇介绍滚动驱动型动画的文章。

视图过渡

浏览器支持

• 111
• 111
• x
• 18

来源

借助 View Transition API，您可以轻松地在单个步骤中更改 DOM，同时在两种状态之间创建动画转换。这些过渡可以是视图之间的简单淡出淡入，但您也可以控制页面的各个部分应如何过渡。

视图转换可用作渐进式增强功能：将通过任何方法更新 DOM 的代码封装在视图转换 API 中，并为不支持该功能的浏览器提供回退。

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

转场效果应如何呈现由 CSS 控制

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

正如 Maxi Ferreira 在这个精彩的演示中所演示的那样，在视图转换期间，其他页面互动（例如正在播放的视频）会继续正常运行。

View Transitions 目前适用于 Chrome 111 中的单页应用 (SPA)。我们正在努力支持多页面应用。如需了解详情，请参阅我们的完整视图转换指南，其中将详细介绍相关内容。

总结

请访问 developer.chrome.com，及时了解 CSS 和 HTML 的最新动态，并观看 I/O 大会视频，了解更多 Web 动态。