Web 界面最新动态

Bramus
Una Kravets

发布时间：2026 年 7 月 1 日

在 2026 年 Google I/O 大会上，我们分享了 Web 界面平台即将推出的一系列更新。从尊重用户偏好到实现自然互动、引导导航、减少杂乱和适应各种平台，现代 Web 为开发者提供了极其强大的工具，可用于打造高质量的触感用户体验。

下面是“Web 界面中的新功能”会话中提及的所有功能的全面汇总，这些功能按我们的核心用户体验原则进行结构化整理。

第 1 部分：尊重用户偏好设置

个性化对于网站可用性至关重要。借助现代 Web API，您可以更轻松地自动适应用户在系统级做出的选择。虽然这些概念看似基本，我们已经讨论多年，但实际上有一些新的 API 和模式可以更轻松地构建这种动态个性化功能。

1. contrast-color()

contrast-color() CSS 函数接受输入颜色，并根据 WCAG AA 最低对比度算法，自动返回 black 或 white，具体取决于哪种颜色与输入颜色的对比度更高。这样可确保文本清晰易读，而无需手动维护文本-背景颜色对。

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

详细了解“contrast-color()”

2. light-dark()

借助 light-dark() CSS 函数，您可以在单个声明中为属性指定两个不同的值（颜色或图片），一个用于浅色模式，另一个用于深色模式。浏览器会根据有效的 color-scheme（必须在 :root 或父级上设置为 light、dark 或 light dark）自动选择正确的对比色。

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

light-dark() 的新功能是，它不再仅限于颜色值。从 Chrome 150 开始，它现在还接受两个图片值。

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. CSS 自定义函数 (@function)

借助 @function at 规则，您可以直接在原生 CSS 中定义可重复使用的自定义函数。它可以接受本地范围的自定义属性作为实参，执行计算，并使用 result 描述符返回值，从而减少对预处理器的需求。

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

结合使用容器样式查询和 CSS if() 函数，您可以创建适用于任何类型值的自定义 --light-dark() 函数，如本演示中所示：

4. 容器样式查询

作为 CSS 容器查询的一部分，样式查询让开发者能够根据父容器的计算自定义属性值，为后代元素应用样式，从而实现动态组件，而无需明确指定尺寸包含。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

在此演示中，样式查询用于根据 --theme 自定义属性设置颜色。

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

详细了解样式查询

5. CSS if() 函数

if() CSS 函数可将内嵌条件逻辑直接应用于 CSS 属性值。它会评估一系列以英文分号分隔的条件（样式查询、媒体查询或功能查询），并允许您为第一个值为 true 的条件设置不同的关联值，还可以选择性地设置 else 回退。

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

在之前的演示中，if() 函数用于根据 contrast-color() 函数的输出创建主题对比色。

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

与 @supports 搭配使用的 CSS at-rule() 函数可让开发者检测浏览器是否识别特定的 at-rule，例如 @starting-style 或 @view-transition。

例如，如需检查是否支持 @function，请按如下方式使用：

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

使用 at-rule() 只能检查 at 规则本身的基本支持，而不能用于测试特定描述符、前奏或完整的 at 规则块。您可以使用一些变通方法来检测锚定查询或样式查询等功能。

详细了解“@supports at-rule”

7. <meta name="text-scale">

text-scale HTML 元标记可让网页根据操作系统和浏览器级文字缩放设置按比例缩放 <html> 根元素的初始字号，这对于移动平台尤为重要。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

应用后，html 元素的字号现在由操作系统决定，因此您无需设置基本 font-size。如果您随后使用 em 和 rem 等相对单位指定长度，则计算出的像素值将基于该基本字号。

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

在开发者工具的“渲染”标签页中，您可以模拟首选字号。使用下拉菜单更改值。

详细了解“<meta name=text-scale>”

第 2 部分：实现自然互动

直观的物理运动和自然的手势是让 Web 体验像原生应用一样具有触感的关键。借助现代 CSS，您可以更轻松地实现这一点。

8. linear() 缓动函数

借助 linear() 缓动函数，您可以通过在无限数量的指定进度点之间进行线性插值，创建复杂的自定义过渡曲线（例如弹跳、弹簧或弹性过冲）。

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

在以下演示中，linear() 用于在显示或隐藏对话框时为其提供自然的缓动效果。

详细了解“linear()”

9. @starting-style

@starting-style CSS @ 规则用于定义元素在首次呈现在 DOM 中时或其 display 从 none 更改为可见值时，您希望元素从其过渡的属性的起始值，以实现平滑的进入过渡效果。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

在之前的演示中，此属性用于在 <dialog> 首次变为可见时为其添加动画效果。

10. transition-behavior: allow-discrete

transition-behavior 属性（通常在 transition 简写中使用为 allow-discrete）可让您转换离散属性（例如 display 或 overlay），确保元素在退出动画期间保持可见，然后再隐藏。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index()和sibling-count()

sibling-index() 和 sibling-count() CSS 函数会分别返回整数，表示元素在其同级元素中的从 1 开始的位置和同级元素总数。它们非常适合在 CSS 中动态计算交错动画延迟，而无需使用 JavaScript。

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

在此演示中，对话框的内容通过在 animation-delay 中使用 sibling-index() 交错显示

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. 对话框轻关闭（closedby 属性）

<dialog> 元素上的 closedby 属性（值为 any）可让您使用声明性“轻触即关闭”行为，在点击模态对话框外部或按 ESC 时自动关闭模态对话框，而无需自定义 JavaScript。

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

您可以在之前的演示中尝试一下。

13. corner-shape

借助实验性 corner-shape 简写属性，开发者可以修改圆角（从 border-radius 开始），以创建自定义视觉形状，例如 bevel、scoop、notch 或 squircle（通过 superellipse()）。边框、阴影和焦点轮廓会自动适应形状。

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

第 3 部分：提供引导式导航

引导用户历程有助于保持上下文并了解应用流程，从而消除令人迷失方向的重新加载。您可以通过多种方式实现此目的，包括使用视图过渡效果，该效果最近进行了一些更新。

14. 同文档视图过渡

作为 View Transition API 的一部分，同文档过渡通过捕获快照并使用 CSS 对其进行过渡，为单页应用 (SPA) 中的 DOM 状态之间的动画提供了一种机制。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

详细了解同一文档中的视图转换

15. 跨文档视图过渡

将 View Transition API 扩展到多页应用 (MPA)，让您在不同文档之间导航时，通过匹配页面上具有相同 view-transition-name 的元素来创建无缝的动画转换。

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

详细了解跨文档视图转换

16. 元素范围内的视图过渡

Chrome 147 中引入的元素范围的视图转换可让您仅在特定 DOM 子树（使用 element.startViewTransition()）上运行视图转换，同时保持页面的其余部分处于活动状态并可互动。

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

启动元素范围的视图转换时，它会以隔离方式运行：它只会扫描该子树中具有 view-transition-name 的元素，并将 ::view-transition 伪选择器注入到范围根本身。由于系统会自动应用 view-transition-scope: all，因此可以实现隔离。

这样一来，系统就可以同时运行多个视图过渡，还可以嵌套视图过渡：在这些列表中的项进行混排的同时，您还可以交换列表本身。

此外，群组伪元素会自动嵌套，并且在需要时会剪裁封闭群组子级伪元素的溢出部分。

作用域限定的视图过渡非常适合微互动和页内有状态变形，可在出现视觉变化时为用户提供更多背景信息。这是一种提升应用可用性的绝佳方式，同时还能改善应用的外观和使用体验。这些小细节会带来大不同！

详细了解元素范围的视图转换

17. 两阶段视图过渡

这是一项实验性功能，可立即开始跨文档视图转换，而无需等待新 DOM 准备就绪，首先转换为中间骨架屏幕或加载界面，然后再继续进行跨文档视图转换。

详细了解双阶段视图转换

18. 滚动驱动的动画

滚动条驱动的动画可将 CSS 动画的进度直接与滚动容器的滚动位置相关联，让开发者能够构建基于滚动的界面，例如高效的视差效果和滚动指示器。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. 滚动触发的动画

Chrome 新增了滚动触发的动画。滚动触发的动画会在滚动边界被跨越时触发基于时间的标准 CSS 动画（使用 timeline-trigger 定义触发条件，使用 animation-trigger 播放动画），从而提供 IntersectionObserver 的声明性替代方案。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

滚动触发动画的底层机制是时间轴触发器，这些触发器处于有效或无效状态。

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

在以下演示中开启可视化工具，看看会发生什么：第一个范围是激活范围，用于确定触发器何时变为有效。第二个范围是有效范围，用于确定有效时长。

详细了解滚动触发的动画

20. scroll-target-group: auto

您现在可以构建原生 CSS 滚动侦测器，该侦测器会根据用户的滚动位置自动突出显示导航链接。通过在导航列表上设置 scroll-target-group: auto，浏览器会自动设置 aria-current="true" 并将 :target-current 伪类应用于活动链接。然后，您可以使用 :target-current 进一步设置有效链接的样式。

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

详细了解使用 scroll-target-group 的 CSS 滚动侦测

21. scrollIntoView() 容器选项

scrollIntoView() 方法新增了 container 选项。设置 target.scrollIntoView({container: 'nearest'}) 可将滚动限制为最近的祖先滚动器，而不是让其一直向上冒泡，从而防止令人迷失方向的页面级滚动。

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

在此演示中使用复选框可切换选项的开启和关闭状态：

详细了解“container: "nearest"”

22. 可等待的程序化滚动

所有程序化滚动方法（例如 scroll()、scrollTo() 和 scrollIntoView()）现在都会返回 Promise。这样，开发者就可以在执行后续逻辑（例如添加突出显示效果）之前，await流畅滚动动画的完成情况。

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

在下面的演示中，您可以看到它的实际效果：元素首先滚动到视图中，然后为其添加突出显示效果。

第 4 部分：最大限度地呈现内容，减少噪声

最令人沮丧的网页浏览体验之一是，本想查看内容，却被侵入式弹出式窗口或横幅广告拦截。通过消除视觉杂乱和应用边框，将次要操作移至分层界面后面，从而优先显示内容区域。

23. 滚动状态查询 (scrolled)

作为 CSS 容器查询的一部分，scroll-state 查询可让您根据容器（具有 container-type: scroll-state）的滚动状态设置后代的样式。scrolled 查询（例如 scroll-state(scrolled: bottom)）可检测最近一次相对滚动的方向，从而实现“隐藏栏”等模式。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

详细了解“隐藏栏”模式

24. 锚定容器查询

CSS 锚点定位功能包含锚定容器查询，可让您检查锚定位置元素上当前处于有效状态的回退位置（例如 fallback: bottom 或 fallback: flip-block），从而能够动态更新锚定位置元素（例如提示箭头）的样式。

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

在以下演示中，定位的锚点弹出式窗口会使用锚定容器查询，根据其后备位置和在视口中的位置重新定位自身。当提示工具在调用方上方打开时，它会从来源位置自下而上地显示动画。当它位于调用方下方时，会从上到下进行动画处理。

25. CSS border-shape

借助 border-shape 属性，您可以使用与 clip-path 相同的形状语法来定义非矩形边框。与剪裁不同，border-shape 可确保边框、轮廓和阴影在视觉上与自定义形状保持一致。此外，border-shape 比 corner-shape 更加灵活，因此功能也更强大。

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. CSS shape() 函数

借助 CSS shape() 函数，您可以在 CSS 中内嵌定义复杂的几何路径。它可以与 clip-path、border-shape 或 shape-outside 等属性搭配使用，以创建内容可以环绕的自然非矩形形状。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. 每个轴的粘性定位

由于最近对溢出规范进行了更改，允许容器仅作为单个轴的滚动器，因此粘性定位现在可以同时跟踪两个不同的滚动容器（每个轴一个）。这样一来，即使在单轴滚动容器内，表格中的粘性首列和首行也能按预期运行。

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

在 Chrome 148 中，启用“实验性 Web 平台功能”标志后，即可测试此功能。

详细了解每个轴的 position: sticky

第 5 部分：适应设备规格

Web 最宝贵的一点就是它的灵活性。用户可以通过各种设备浏览网页，每种设备都有自己的互动机制。布局应从根本上适应设备和输入法，无论虚拟键盘是否打开，或者触摸目标是否处于活动状态。在设计网站时考虑到设备规格，可让您的网站或 Web 应用更具精致感，并符合用户预期。

28. 滚动回弹手势（可滑动区域）

适应设备规格的一个示例是在移动网站上使用基于滑动和手势的互动。您可以使用滚动器来实现其中一些效果，但这种方法并不总是直观易懂。

Chrome 团队正在与 OpenUI 社区群组讨论一项提议的声明式解决方案，该解决方案可让您使用 overscrollcontainer 和命令调用方创建原生、手势驱动的可滑动区域（例如，可滑动的 Gmail 列表或滑动即可关闭的侧边菜单），从而在触控和滚动之间自然切换。

详细了解滚动回弹手势

29. HTML-in-Canvas

HTML-in-Canvas API 是一项重大范式转变，可让开发者将真实的 DOM 元素放置在 <canvas> 内（使用 layoutsubtree 属性）。这些元素仍然完全可搜索、可访问，并支持自动填充等浏览器功能，同时允许 WebGL/WebGPU 着色器以原生方式与它们互动。

闪电轮

快速了解推动 Web 发展的一些其他强大功能。

30. 保留 DOM 状态的移动 (moveBefore())

借助 moveBefore() DOM 方法，您可以重新设置 DOM 节点（例如，正在播放的视频、iframe 或聚焦的输入）的父级，而不会破坏其状态或触发重新加载。

这意味着，当您在布局中重新设置视频的父元素时，视频会继续播放，iframe 不会重新加载，CSS 动画不会重新开始，输入字段会保持焦点。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

详细了解“moveBefore()”

31. CSS text-fit

text-fit 是一项实验性 CSS 属性，可动态缩放字号，使文本行精确适应其包含元素（例如 text-fit: grow per-line-all）的宽度。

详细了解“text-fit”

32. CSS text-box（text-box-trim 和 text-box-edge）

text-box 属性（及其简写形式 text-box-trim 和 text-box-edge）可裁剪文字上方和下方的垂直空间（行距），确保实现完美的垂直对齐和居中。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

详细了解“text-trim”

33. CSS 间隙装饰

CSS 间距装饰为网格和 flexbox 带来了 column-rule，并引入了新的 row-rule 属性，让开发者可以设置行和列之间的间距样式。您无需再使用边框或伪元素来设置行和列之间的分隔线样式。

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

详细了解 CSS 间隙装饰

34. 可感知滚动条的视口单位（vw、vh 等）

视口单位（如 vw 和 vh）会自动减去滚动条的大小（如果保证滚动条可见，则使用在 :root 上声明的 overflow-y: scroll 或 scrollbar-gutter: stable），从而防止在将元素设置为 100vw 时出现意外的水平溢出。

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

详细了解可感知滚动条的视口单位

35. 通过 JavaScript 访问伪元素

Web API 现在向 JavaScript 公开 CSS 伪元素（例如 ::before 或 ::after）。

您可以使用 Element.pseudo(type) 检索 CSSPseudoElement 实例，并使用 Event.pseudoTarget 检查哪个伪元素触发了事件。

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

详细了解“CSSPseudoElement”

总结

以上就是本期Web 界面最新动态的全部内容。我们希望您能利用这些功能构建出色的界面。明年见！