谷歌的“Web UI 新功能”演讲：更少的自定义组件 JavaScript，更多的 Web 标准

Una Kravets最近在一次演讲中介绍了Chrome团队支持的Web UI的最新发展。一些目前需要大量 JavaScript 的常见 UI 模式可能，很快就会以声明式的方式实现，使用 HTML 和 CSS 的新特性，使用更少的自定义 JavaScript，并内置无障碍功能。

演讲重点介绍了三种特别棘手的 UI 模式：可定制的选择菜单、轮播图和悬停卡片。所有这三种 UI 模式在设计系统中都很常见，需要许多 JavaScript 代码来实现自定义样式、呈现、布局、交互或无障碍模式。随着浏览器供应商发展网络标准，将这些模式从用户层纳入到了浏览器本身，开发人员在未来可能需要做的工作更少了，只需依赖平台。更少的自定义 JavaScript 也有利于用户提高性能。提议的声明式 API 已经包含在至少一个稳定的浏览器引擎中了。

首先讨论的模式是可定制的选择菜单。原生 <select> 元素的内部结构历来很难在不同浏览器中一致地进行样式定制：

开发人员在尝试使用浏览器内置表单控件（ <select> 和各种 <input> 类型）时，一个常见的挫折是他们无法自定义这些控件的外观以适应他们网站的设计或用户体验。在一项关于表单控件和组件的Web开发人员调查中，开发人员重写这些控件版本的主要原因是无法充分自定义原生控件的外观。

可定制选择菜单的构建块是Popover API和锚点定位。

Popover API 处理浮动选项列表，确保它出现在其他 UI 元素之上，易于关闭，并管理焦点。Popover 已达到基线状态，现在在所有浏览器中都可用。

命令调用者（ Command 和 commandfor 属性）提供了一个类似于 popovertarget 的声明式 HTML 解决方案，用于将按钮点击连接到操作（例如，打开对话框），减少了样板 JavaScript 的需求。

锚点定位（Anchor Positioning）是一个 CSS API，允许开发人员将元素相对于其他元素（称为锚点）进行定位。这个 API 简化了许多界面特性（如菜单和子菜单、工具提示、选择、标签、卡片、设置对话框等）的复杂布局需求。锚点定位是Interop 2025的一部分，这意味着它将在今年年底出现在所有浏览器中。

改进的 select 元素结构展示了两个部分，一个按钮和一个锚定在该按钮上的弹窗，它们都有相应的选择器用于定位和设置样式：

可以通过选择器 ::picker(select) 为弹出窗口应用样式。一个自定义样式的例子如下所示：

/*进入自定义模式*/select,::picker(select) {  appearance: base-select;}

/*设置按钮的样式*/::select-fallback-button {  background: gold;  font-family: fantasy;  font-size: 1.2rem;}

/*设置下拉菜单中选择器的样式*/::picker(select) {  border-radius: 1rem;}

/*设置选项的样式*/option {  font-family: monospace;  padding: 0.5rem 1rem 0.5rem 0;  font-size: 1.2rem;}

/*下拉列表中选中项的样式*/option:checked {  background: powderblue;}

/*设置鼠标悬停或焦点时的选项样式*/option:hover,option:focus-visible {  background-color: pink;}

/*设置当前选项指示符的样式*/option::before {  content: '';  font-size: 80%;  margin: 0.5rem;}

/*类推*/body {  padding: 2rem;}

鼓励开发人员查看完整的演讲以获取更多的技术细节、演示和解释。这次演讲还解释了CSS Overflow 5规范中的新特性，即滚动按钮和滚动标记，是如何在纯CSS中实现滚动驱动动画（例如轮播图）的。

原文链接：

https://www.infoq.com/news/2025/06/new-web-ui-standard-2025/