Google 的“Web UI 新功能”:减少自定义 JavaScript 组件， Web新 标准

Una Kravets最近在一次演讲中介绍了Chrome 团队支持的 Web UI 的最新进展。一些目前需要大量 JavaScript 的常见 UI 模式可能很快就能通过 HTML 和 CSS 的新功能，以声明式的方式实现，减少自定义 JavaScript 代码，并内置可访问性。

本次演讲重点关注三种特别棘手的 UI 模式：可自定义的选择菜单、轮播和悬停卡片。这三种 UI 模式在设计系统中都很常见，需要使用多行 JavaScript 代码来实现自定义样式、呈现、布局、交互或可访问性模式。随着浏览器供应商不断改进 Web 标准，将这些模式从用户空间整合到浏览器本身，开发者未来可能会减少工作量，只需依赖平台即可。更少的自定义 JavaScript 代码也能提升性能，从而为用户带来益处。拟议的声明式 API 已在至少一个稳定的浏览器引擎中发布。

讨论的第一个模式是可自定义的选择菜单。原生<select>元素的内部结构一直以来都很难在不同浏览器中保持一致的样式：

开发人员在尝试使用浏览器内置表单控件（<select>以及各种类型的控件<input>）时，经常会遇到一个问题：无法自定义这些控件的外观以适应网站的设计或用户体验。一项针对Web 开发人员的关于表单控件和组件的调查显示，开发人员重写这些控件的首要原因是无法充分自定义原生控件的外观。

可自定义选择的构建块是Popover API和Anchor Positioning。

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

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

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

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

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

/* enter custom mode */
select,
::picker(select) {
  appearance: base-select;
}

/* style the button */
::select-fallback-button {
  background: gold;
  font-family: fantasy;
  font-size: 1.2rem;
}

/* style the picker dropdown */
::picker(select) {
  border-radius: 1rem;
}

/* style the options */
option {
  font-family: monospace;
  padding: 0.5rem 1rem 0.5rem 0;
  font-size: 1.2rem;
}

/* style selected option in the dropdown */
option:checked {
  background: powderblue;
}

/* style the option on hover or focus */
option:hover,
option:focus-visible {
  background-color: pink;
}

/* style the active option indicator */
option::before {
  content: '';
  font-size: 80%;
  margin: 0.5rem;
}

/* etc. */
body {
  padding: 2rem;
}

鼓励开发者查看完整演讲，了解更多技术细节、演示和讲解。演讲还解释了CSS Overflow 5 规范中的最新功能（即滚动按钮和滚动标记）如何纯粹使用 CSS实现滚动驱动的动画（例如轮播）。