发布时间：2026 年 5 月 19 日
此列表列出了“新版 Web 指南”中目前提供的所有使用情形。
accessibility
accessible-error-announcement
将程序化无障碍状态（例如 aria-invalid）与视觉 :user-invalid 状态同步，以确保屏幕阅读器用户仅在互动后收到错误反馈，从而与视觉体验保持一致。
使用的功能：
built-in-ai
language-detection
使用的功能：
language-model
使用 Prompt API 在浏览器中运行设备端自然语言推理，支持流式输出、结构化 JSON 响应和多轮会话管理。
使用的功能：
summarizer
使用设备端 Summarizer API 总结文本内容。
使用的功能：
translator
使用的功能：
css
highlight-text-ranges
突出显示网页上的任意文本范围，例如搜索结果、拼写错误或协作编辑光标。
使用的功能：
forms
animated-select-picker
创建下拉菜单带有动画效果的自定义选择组件。例如，菜单淡入或滑动到视图中，或者选项在选择时会动画显示。
使用的功能：
autofill-address-form
构建具有正确的自动补全属性和自动填充支持的地址表单。
使用的功能：
autofill-highlight-inputs
使用 CSS 突出显示浏览器自动填充但用户未修改的表单字段。
使用的功能：
autofill-payment-form
构建一个支付表单，用于收集信用卡详细信息，并支持正确的自动补全值和自动填充功能。
使用的功能：
autofill-sign-in-form
构建具有正确自动补全值和自动填充支持的登录表单。
使用的功能：
autofill-sign-up-form
构建具有正确自动补全值和自动填充支持的注册表单。
使用的功能：
brand-consistent-forms
使复选框、单选按钮、范围滑块和进度条与网站的调色板相匹配，而无需使用自定义组件替换它们。
使用的功能：
branded-select-styling
创建自定义选择元素，使其按钮、选择器、箭头图标和对勾标记都能与品牌或设计系统的排版、颜色、间距和边框处理效果完美匹配。
使用的功能：
custom-select-picker-layouts
创建自定义选择器，其选项以独特或有趣的方式定位，而不是传统的堆叠式选项列表。
使用的功能：
form-fields-automatically-fit-contents
允许表单字段根据用户输入的内容进行扩缩，例如，当用户输入内容或选择其他选项时。应用大小上限和下限，以创建符合网页设计的动态自适应表单字段。
使用的功能：
required-field-feedback
仅在用户互动后，才为跳过或留空的必填表单字段提供出错提示，以避免抢占式错误，并确保反馈及时且与用户流程在情境上相关。
使用的功能：
rich-media-picker
创建一个自定义选择组件，其选项可以包含复杂的 HTML 格式（例如图片、图标和其他富格式），而不仅仅是纯文本。
使用的功能：
select-menu-interaction
仅当用户与控件互动后，验证是否已在选择菜单中选择非默认选项。
使用的功能：
validate-input-after-interaction
仅在用户完成初始互动后才显示表单字段验证反馈（例如密码复杂程度或电子邮件格式要求），避免在网页加载时或用户输入内容时过早显示错误。
使用的功能：
passkeys
passkey-authentication
使用通行密钥对回访用户进行身份验证，以实现主要登录方式。
使用的功能：
passkey-conditional-create
在密码登录成功后，为现有用户静默注册通行密钥。
使用的功能：
passkey-management
允许用户查看和管理其账号注册的通行密钥。
使用的功能：
passkey-reauthentication
在执行敏感操作之前，使用已登录用户的现有通行密钥验证其身份。
使用的功能：
passkey-registration
为现有用户账号注册通行密钥。
使用的功能：
performance
batch-analytics-events
在单个信标中对多个分析事件进行去抖动和批处理，以最大限度地减少网络争用并降低服务器负载，同时仍能提供实时更新。
使用的功能：
break-up-long-tasks
分解繁重的同步处理（复杂的计算和/或长循环）或 DOM 更新，以便浏览器处理用户输入并重新绘制屏幕。
使用的功能：
calculate-total-foreground-time
计算用户实际浏览网页的总时间，不包括标签页在后台运行的时间。
使用的功能：
conditional-async-dependencies
有条件地加载或初始化异步依赖项（例如导入缺少 Web 功能的 Polyfill），而无需在网页的所有脚本依赖项之间进行复杂的编排。
使用的功能：
defer-rendering-heavy-content
通过延迟渲染用户不会立即看到的所有内容，缩短内容繁多的网页（例如包含长 Feed、大量文章或复杂信息中心的网页）的渲染时间。
使用的功能：
defer-work-until-scroll-ends
将 DOM 更新、数据提取、分析跟踪或布局重新计算等开销较大的操作延迟到滚动完成后再执行，以保持流畅的滚动性能。
使用的功能：
deprioritize-background-fetches
降低使用 Fetch API 进行的后台流量提取的优先级，以防止与用户发起的请求发生网络争用。
使用的功能：
detect-initial-visibility-state
可靠地确定网页是否最初在后台加载，即使在用户将网页置于前台后以异步方式加载脚本的情况下也是如此。
使用的功能：
efficient-background-processing
当组件不在屏幕上时，暂停后台 JavaScript 执行（例如 <canvas> 动画、WebGL 渲染或高频 WebSocket 数据轮询），然后在组件滚动回视图中时及时恢复，从而节省系统资源和电池续航时间。
使用的功能：
faster-spa-view-transitions
通过保留单页应用 (SPA) 中之前访问过的视图的结构化 DOM 状态，而不是在每次导航时销毁并重建这些视图，从而实现更快的转换。
使用的功能：
full-session-analytics
可靠地跟踪用户在整个网页访问过程中的分析、错误和遥测数据，并延迟发送数据，直到用户离开网页。
使用的功能：
identify-heavy-scripts
找出导致动画帧时长过长的脚本
使用的功能：
identify-inp-causes
识别影响 INP 指标的运行缓慢的 JavaScript
使用的功能：
improve-next-page-load-performance
通过预提取或预渲染用户接下来可能会访问的网页，提升网页加载性能。
使用的功能：
interactions-in-complex-layouts
避免在复杂布局（例如数据密集型信息中心或电子表格样式的网格）中重新计算布局，从而使互动更流畅、响应更迅速（降低 Interaction to Next Paint (INP) 分数）。
使用的功能：
optimize-image-priority
优化 Largest Contentful Paint (LCP) 候选图片的加载优先级，并降低非关键图片的优先级，以减少关键资源加载延迟。
使用的功能：
optimize-preload-priority
优化预加载内容的相对优先级，以减少关键资源加载延迟。
使用的功能：
optimize-script-priority
通过提升关键异步脚本的加载优先级并降低非必需脚本或后期正文脚本的优先级，优化脚本的加载顺序，减少延迟。
使用的功能：
resolution-optimized-pseudo-elements
在 CSS 伪元素（例如 ::before 和 ::after）中使用经过分辨率优化的图片，以减少 DOM 节点的数量。
使用的功能：
schedule-tasks-by-priority
安排具有不同优先级的任务，以确保先运行关键工作，同时延迟后台工作。
使用的功能：
sequence-distributed-events
通过记录纳秒级精度的时间戳，在分布式微服务或高吞吐量跟踪环境中记录操作并按顺序排列。
使用的功能：
user-experience
adapt-scrollbar-to-contrast-preferences
为偏好高对比度界面的用户提高滚动条的可视性
使用的功能：
anchor-positioning-tab-underline
在两个目标元素位置之间无缝过渡元素。例如，在之前选择的标签页和当前选择的标签页之间移动所选标签页下划线。
使用的功能：
animate-element-entry-exit
在元素添加到 DOM 或从 DOM 中移除时，或者在元素的 display 值切换时，平滑地隐藏/显示元素。
使用的功能：
animate-to-from-top-layer
为对话框、弹出式窗口和提示等元素在进入/退出顶层时添加动画效果。
使用的功能：
animate-to-intrinsic-sizes
使互动组件（例如手风琴、菜单和展开式卡片）平滑地从其自然尺寸过渡到其他尺寸，反之亦然。
使用的功能：
apply-webgl-shaders
使用 WebGL 着色器将自定义视觉效果应用于 HTML 内容。
使用的功能：
calculate-event-differentials
计算日期和时间之间的时长和剩余时间。
使用的功能：
calculate-with-intrinsic-sizes
根据元素的固有大小计算其大小，同时确保其符合给定的设计限制。
使用的功能：
capture-location-agnostic-data
记录不应根据用户位置而发生变化的时间顺序数据，例如出生日期、周期性闹钟或国定假日。
使用的功能：
carousel-slide-effects
创建包含图片或其他视觉元素的幻灯片轮播界面，其中每张幻灯片在进入/居中/退出滚动器时都会以动画形式呈现。例如，幻灯片可以淡入/淡出、旋转、放大或缩小等。
使用的功能：
carousel-snap-highlights
在滚动贴靠轮播界面、图库或全屏滑动体验中，以醒目的视觉效果突出显示当前贴靠的非互动项。例如，在贴靠时展开卡片或显示隐藏的内容。
使用的功能：
child-state-based-styling
构建一个根据其子元素之一的状态更改样式的组件。例如，根据主题切换开关是否处于选中状态来以浅色或深色模式呈现的组件。
使用的功能：
complex-shapes
将剪辑元素及其内容剪辑为任意自由形状，例如符号、笔触或自然纹理，以实现更具表现力的设计。
使用的功能：
component-specific-light-dark-theme
强制某些元素（例如代码块、媒体播放器等）采用浅色模式或深色模式，而与网页的配色方案无关。
使用的功能：
consistent-cross-document-transitions
在启动跨文档视图转换之前，请确保关键页面状态已加载且稳定。这意味着，在过渡运行之前，系统会加载并应用关键 CSS 样式，加载并运行关键 JavaScript，并解析用户初次查看网页时可见的 HTML。
使用的功能：
content-based-styling
构建一个组件，使其根据是否包含特定子元素来更改布局。例如，如果组件包含图片，则使用多列布局；否则，默认使用单列布局。
使用的功能：
coordinate-global-events
通过将未来的会议或活动明确绑定到地理 IANA 时区来安排这些会议或活动，以便无论在时钟更改期间是否发生夏令时 (DST) 过渡，或者是否出现“跳过”或“重复”的小时，活动时间都能保持准确。
使用的功能：
cross-document-transitions
在全页导航之间创建平滑、无缝的过渡效果，例如淡入淡出、自定义显示效果或将内容从一个页面变形到下一个页面。
使用的功能：
customize-scrollbar-color-and-thickness
自定义滚动条的颜色或粗细
使用的功能：
dark-mode
以尊重用户浅色/深色主题偏好设置的方式实现深色模式支持，并调整浏览器界面（例如滚动条、表单控件等）
使用的功能：
declarative-button-actions
以声明方式将按钮连接到任何元素，以使用声明式按钮命令、调用方命令、按钮命令、自定义命令或声明式切换操作触发自定义的应用专用操作。
使用的功能：
declarative-dialog-popover-control
通过按钮切换对话框或弹出式窗口的显示状态，无需编写 JavaScript。
使用的功能：
deliver-optimized-decorative-images
同时提供新一代图片格式（例如 AVIF 或 WebP）和多种像素密度（例如 1 倍和 2 倍），以便浏览器可以根据用户设备的性能动态协商出文件大小和视觉质量的最佳组合，从而提供优化的装饰性图片（例如背景、界面图标或复杂蒙版）。
使用的功能：
design-token-reactivity
定义更高级别的设计令牌，例如密度模式（紧凑、标准、宽松）或主题，并让后代组件以适合组件的方式直接对更改做出反应。
使用的功能：
directional-navigation-transitions
为视觉状态变化添加动画效果，以反映用户的导航流程方向，例如在向前推进时从右侧滑入新内容，或在返回到上一个屏幕时从左侧滑入新内容。
使用的功能：
dynamic-sibling-animations
在同级元素之间错开动画或过渡时间，以便每个元素在根据其在同级元素列表中的位置计算出的延迟时间后开始。
使用的功能：
dynamic-sibling-styling
创建可自动适应群组中元素数量的动态视觉频谱或布局安排。
使用的功能：
export-html-media-from-canvas
在画布中捕获动态 HTML 内容并将其导出为图片或视频帧。
使用的功能：
expose-canvas-content-to-browser-features
向辅助技术、翻译或阅读模式等浏览器功能公开在画布中呈现的内容。
使用的功能：
flicker-free-client-side-ab-testing
使用客户端 JavaScript 交付和呈现 A/B 测试、多变量测试或其他实验，以更改或注入 HTML、CSS 和 JavaScript，而无需先显示原始内容，然后再闪烁或闪现以显示实验内容。
使用的功能：
fluid-scaling
根据父容器的大小平滑缩放字体大小、间距和媒体大小等项，而不是使用固定的断点
使用的功能：
format-human-readable-durations
以易于理解的本地化格式向用户显示已用时间或时长，并可根据具体情况灵活显示详细的单位细分（例如“1 小时 30 分钟”）或总单位数（例如“90 分钟”）。
使用的功能：
group-element-transitions
使用相同的过渡逻辑同时过渡一组类似元素，例如从购物车中移除商品，并让所有其他商品以动画形式移动到新位置。
使用的功能：
improve-text-layout-and-legibility
通过使浏览器在换行时应用均匀平衡的换行符，改进短的独立文本内容（例如不超过几行的标题）的布局和可读性。
使用的功能：
individual-transform-properties
独立于单个元素上的其他转换属性，为单个 CSS 转换属性（例如平移、旋转、缩放）添加动画效果或替换这些属性。
使用的功能：
interactive-content-in-3d-scenes
将互动式 HTML 元素集成到 3D 场景中。
使用的功能：
interactive-content-reveal
创建互动式显示效果，例如聚光灯效果，让聚光灯跟随用户的指针移动，以显示图片或界面部分中的详细信息。
使用的功能：
interest-triggered-action-previews
在用户表示感兴趣（例如悬停、聚焦或长按）但尚未点击之前，显示按钮效果的实时预览。
使用的功能：
interest-triggered-tooltips
当用户将鼠标悬停在互动元素上方、聚焦到互动元素上或长按互动元素时，显示工具提示或补充信息，而无需点击。
使用的功能：
light-dismiss-a-dialog
创建一个可以使用轻触关闭（即点击或点按对话框以外的区域）的模态对话框
使用的功能：
manage-recurring-intervals
计算订阅账单或薪资周期的周期性间隔，自动调整月末过渡等极端情况（例如，将 1 月 31 日增加一个月），以确保准确计算周期。
使用的功能：
model-partial-time-concepts
在不使用会引入计算错误的任意占位值的情况下，对本身缺少标准组成部分（例如特定年份、日期或日期）的日期和时间概念进行建模。
使用的功能：
move-dom-element-without-losing-state
移动或重新设置 DOM 元素的父元素，而不会丢失重要的元素状态，例如可交互性状态（:focus/:active）、<iframe> 加载状态、动画/过渡状态等
使用的功能：
navigation-drawer
创建一个抽屉式导航栏组件，当从菜单按钮触发时，该组件会从侧面滑入，覆盖在现有网页内容之上；当被关闭时（通过滑开、点按外部区域或按 Esc 键），该组件会滑出。
使用的功能：
inertintersection-observerpopoverregistered-custom-propertiesscroll-driven-animationsscroll-initial-targetscroll-snap
overflow-clipping-control
调整元素的可视剪裁边界，使其与内容边缘、内边距边缘或边框边缘对齐，或者与上述任何边缘保持指定的偏移量，从而更精细地控制内容的裁剪方式。
使用的功能：
parallax-scroll-effects
创建基于滚动的效果（例如视差效果），让前景层和背景层以不同的速度移动，从而在用户滚动时营造出深度感。
使用的功能：
persistent-app-tours
使用在用户互动期间保持打开状态的锚定原生叠加层创建持久的初始配置演练。
使用的功能：
persistent-toast-notifications
创建非侵入式 Toast 和叠加层通知，以实现持久的、可堆叠的消息传递和状态通信。
使用的功能：
persistent-top-layer-ui
当模态对话框、全屏元素或原生弹出式窗口的底层 DOM 节点在 DOM 中移动或重新父级化时，保持这些元素处于可见打开状态和功能活跃状态。
使用的功能：
physics-based-easing
创建自定义的基于物理特性的动画和过渡效果（如弹跳和弹簧），这些效果比传统的缓动曲线更自然、更具吸引力。
使用的功能：
platform-controls-dismiss-dialog
创建可以使用标准平台特定用户操作关闭的模态对话框，例如在桌面平台上按 Esc 键，或在移动平台上执行“返回”或“关闭”手势
使用的功能：
position-aware-tooltips
构建带有方向箭头的工具提示和弹出式提示框（或其他视觉样式），当元素翻转到备用位置时，这些箭头会自动指向正确的方向。
使用的功能：
precise-text-alignment
实现与任何字体的文本的精确垂直对齐。例如，文字上方和下方的视觉边衬区完全相等，或者文字与相邻的图标或图片完全对齐。
使用的功能：
prevent-text-wrapping
确保浏览器不会在文本中插入换行符，并且允许文本溢出其容器。
使用的功能：
pull-to-reveal
构建一个下拉显示功能，让用户能够下拉屏幕以显示更多内容，例如搜索栏。
使用的功能：
reduce-style-repetition
通过将复杂或动态的样式设置逻辑封装到可重用的函数（例如，根据一组输入参数计算渐变的函数）中，减少过多的样式重复。
使用的功能：
resilient-context-menus-and-nested-dropdowns
构建可访问的自适应菜单、提示、下拉菜单或必须与特定界面元素绑定的情境叠加层，确保叠加层在遇到视口边缘时自动重新定位自身（例如翻转轴），从而确保叠加层永远不会被截断。
使用的功能：
same-document-transitions
通过平滑地改变持久性元素的大小、位置或其他样式属性，在单页应用 (SPA) 中以直观方式将不同页面状态或导航中的持久性元素关联起来（例如，将产品缩略图展开为全幅主打图片）。
使用的功能：
scroll-entry-exit-effects
在用户滚动时，当元素进入和退出滚动视口（或视口）时，创建淡入、放大或其他复杂的显示效果。
使用的功能：
scroll-position-aware-elements
构建浮动按钮或 widget（返回顶部、滚动到底部、聊天启动器等），这些按钮或 widget 会根据用户是否滚动过网页而显示或消失。
使用的功能：
scroll-progress-indicator
创建滚动进度条、分步进度跟踪器或任何其他视觉提示，以告知用户已滚动到页面或部分的哪个位置。
使用的功能：
scroll-snap-realtime-feedback
在用户滚动浏览贴靠对齐的内容时，在关联的界面元素中提供实时视觉反馈，直到滚动手势完成。
使用的功能：
scroll-snap-state-sync
同步可滚动容器中与当前贴靠项相关的导航指示器、关联的内容面板和分析跟踪。
使用的功能：
scroll-target-on-load
构建可滚动的元素列表（例如图片轮播界面或聊天对话串），该列表可在初始渲染时显示，并可滚动到特定元素以显示该元素。
使用的功能：
scrollability-affordance-hints
构建滚动阴影叠加层、渐变淡出效果或方向箭头指示器，这些效果仅在相应方向上确实有更多内容可供滚动时才会显示。
使用的功能：
scrollytelling
在目标元素上为视觉属性添加动画效果，例如淡化背景、更改背景颜色，或创建滚动叙事体验，而这些效果完全由另一个元素的滚动视口位置驱动。
使用的功能：
search-hidden-content
使用手风琴、标签页和“阅读更多”部分等模式隐藏内容，同时确保隐藏文字在原生“在网页中查找”搜索期间显示出来，允许搜索引擎编入索引，支持网址片段深层链接，并保持 ARIA 无障碍功能。
使用的功能：
shaped-cutouts
组合多个形状，在元素中创建复杂的镂空或“挖空”效果，例如在元素中添加凹口。
使用的功能：
shrinking-header-on-scroll
在滚动时平滑地为固定标题或全屏封面添加动画效果，使其在预定义的滚动距离内动态缩小、获得阴影并转换布局。
使用的功能：
size-aware-styling
构建一个组件，其样式可以有条件地依赖于自身的宽度或高度，而不是视口的宽度或高度。例如，可以根据自身大小更改布局的卡片组件，或者可以根据自身宽度有条件地显示帮助文本的行动号召按钮。
使用的功能：
soft-edge-content-fade
将透明度渐变效果应用于内容边缘，以指示可进一步滚动浏览的区域或模糊付费墙后的文字。
使用的功能：
stabilize-reactive-state
在数据驱动的视图中管理任务截止日期或安排，而不会因共享的可变状态产生意外的副作用。
使用的功能：
stack-drill-down
构建全屏分层导航，让用户能够深入了解嵌套视图，并通过滑动或导航返回，同时保持浏览器历史记录同步。
使用的功能：
style-parent-with-has
当表单字段无效时，设置其父元素（例如标签或 fieldset）的样式。
使用的功能：
support-global-calendar-systems
针对国际用户，准确显示和计算非公历日历系统（例如伊斯兰历、希伯来历或农历）中的日期。
使用的功能：
swipe-to-remove
让用户可以通过水平滑动操作来处理列表中的项目（移除、归档、标记为已读等），以便快速处理条目，而无需点按单独的控件。
使用的功能：
scroll-snapscroll-initial-targetoverscroll-behaviorscrollbar-widthintersection-observermutationobserverresize-observerweb-animations
visually-stable-font-fallbacks
定义字体样式，以便在首选字体与某个回退字体（或反之）之间发生交换时，文本仍保持可读性和视觉一致性。
使用的功能：
visually-stable-mixed-fonts
定义字体样式，以便在使用多种字体渲染单个文本块时，文本仍保持可读性和视觉一致性。
使用的功能：
visually-texture-content
为元素应用逼真的风化和纹理图案，使其呈现出自然、老旧或实体材质的外观。
使用的功能：
webmcp
agentic-forms
通过使用 WebMCP 属性为标准 HTML 表单添加注解，将客户端功能作为工具提供给 AI 智能体。
使用的功能：
agentic-javascript-tools
使用 WebMCP 命令式 API 以编程方式将客户端 JavaScript 函数注册为 AI 代理的工具。
使用的功能：