发布时间：2026 年 10 月 26 日
探索 Modern Web Guidance 中按类别整理的可用指南。
视觉设计
根据高对比度偏好设置调整滚动条
为偏好高对比度界面的用户提高滚动条的可见性
将 WebGL 着色器应用于 HTML 内容
使用 WebGL 着色器对 HTML 内容应用自定义视觉效果。
颜色
Web 颜色指南，包括对比度要求、浅色和深色配色方案、强制颜色模式，以及根据基色生成浅色和深色。
复杂的形状
将元素及其内容剪辑成任何自由形式的形状，例如符号、笔触或自然纹理，以实现更具表现力的设计。
自定义文本修饰
添加下划线、上划线、删除线或完全自定义的形状等文本装饰，并支持显示动画、自定义偏移量和结束内边距，以及灵活的墨水跳过功能。
自定义滚动条的颜色或粗细
自定义滚动条的颜色或粗细
深色模式
实现深色模式支持，尊重用户的浅色/深色主题偏好设置，并调整浏览器界面（例如滚动条、表单控件等）
在 3D 场景中启用交互式 HTML 内容
将交互式 HTML 元素集成到 3D 场景中。
使用动态背景颜色确保文本可读性
选择在动态背景颜色上具有足够对比度的易读文本颜色。
等宽文本行
使多行标题或组合标识的每一行都具有相同的宽度，就像海报样式或堆叠标题排版一样。与两端对齐的文本不同，文本本身会根据宽度调整大小，而不是拉伸间距
从 Canvas 中导出 HTML 内容
在画布中捕获动态 HTML 内容并将其导出为图片或视频帧。
向浏览器功能公开画布内容
将画布中呈现的内容公开给浏览器功能，例如辅助技术、翻译或阅读模式。
改进文本布局和易读性
通过让浏览器在换行时应用均匀平衡的换行符，改善简短独立文本内容（例如不超过几行的标题）的布局和易读性。
精准文本对齐
实现与任何字体文本的精确垂直对齐。例如，文本上方和下方的视觉内边距完全相等，或者文本与相邻图标或图片完美对齐。
彩色剪影
组合多个形状，在元素中创建复杂的剪切或“镂空”效果，例如为元素添加凹口。
软边缘内容淡出
对内容边缘应用透明度渐变效果，以指示更多可滚动区域或遮盖付费墙后的文字。
为浏览器生成的界面设置主题
使用 CSS 为浏览器生成的界面（例如文本选择、滚动条、表单控件和选择器）设置主题，而不是使用自定义元素重新创建。
排版
适用于 Web 的排版最佳实践，包括字体大小单位、行高、文本换行和平衡，以及随视口缩放的流式排版。
视觉效果
使用 CSS 实现的视觉效果，例如分层阴影、混合模式、具有可预测颜色插值的渐变，以及仅通过渐变构建的条纹、棋盘格、圆点和饼图等图案。
视觉稳定的后备字体
定义字体样式，以便在首选字体和某个后备字体之间进行切换（或反之）时，文本仍可读且视觉上保持一致。
视觉上稳定的混合字体
定义字体样式，以便在多个字体用于呈现单个文本块的情况下，文本仍保持可读且视觉上一致。
视觉纹理内容
为元素应用逼真的风化和纹理图案，使其呈现出自然、陈旧或物理材质的外观。
界面原子
构建滚动进度指示器
创建一个滚动进度条、分步进度跟踪器或任何视觉提示，以传达用户在页面或版块中的滚动进度。
构建轮播滑动效果
创建一个包含图片或其他视觉元素的幻灯片轮播界面，其中每张幻灯片在进入/居中/退出滚动条时都会呈现动画效果。例如，幻灯片可能会淡入/淡出、旋转、变大或变小等。
组件专属的浅色/深色主题
强制某些元素（例如代码块、媒体播放器等）采用浅色模式或深色模式，而不受网页配色方案的影响。
位置感知提示
构建带有方向箭头（或其他视觉样式）的提示和弹出式窗口，当元素翻转到后备位置时，这些箭头会自动指向正确的方向。
拉动即可查看
构建一个下拉显示功能，让用户能够通过在屏幕上向下拉动来显示更多内容，例如搜索栏。
自适应表格
构建一个数据表，以正确的标题语义呈现表格数据，并确保在小屏幕上和使用辅助技术时仍可阅读和导航。
感知滚动位置的元素
构建浮动按钮或微件（返回顶部、滚动到底部、聊天启动器等），这些按钮或微件会根据用户是否滚动而显示和消失。
可滚动性功能提示
构建滚动阴影叠加层、渐变淡出效果或方向箭头指示器，这些指示器仅在相应方向上确实有更多内容可滚动时才会显示。
滚动时缩小标题
在滚动时，让固定标题或全页封面平滑地呈现动画效果，以便在预定义的滚动距离内动态缩小、获得阴影并转换其布局。
感知状态的固定标题
构建粘性版块标题或导航栏，当它们实际“粘”在顶部时，会直观地发生变化，例如更改配色方案或获得阴影。
使用和管理图标
显示和管理可通过 CSS 设置和参数化的图标，这些图标加载速度快，在任何分辨率下都清晰可见，并且可以正确地向辅助技术公开（或隐藏）。
视口感知下拉菜单
定位与触发按钮关联的下拉菜单、弹出式菜单或关联操作面板，使其在视口边缘自动翻转轴，而不是被裁剪。
界面组件
构建卡片
构建一个卡片组件，使其能够根据自身可用空间和内容调整呈现方式。
构建下拉菜单
构建一个菜单组件，用于显示选项或操作列表，并支持嵌套子菜单。
构建 Scrollspy 导航
在导航菜单中突出显示页面当前可见的部分
构建样式化进度条
构建一个样式化的进度条，用于传达任务或流程的完成情况，包括确定状态和不确定状态。
构建交互式悬停卡片
构建一个悬停卡片组件，当用户将鼠标悬停在特定类型的链接（例如用户个人资料）上时，该组件会显示该链接将导航到的页面的交互式结构化预览。
创建永久性应用导览
使用在用户互动期间保持打开状态的系留原生叠加层，创建持久的新手入门演示。
创建消息框通知
创建非侵入式消息框和叠加层通知，用于显示持久、可堆叠的消息和状态通信。
深色模式切换开关
构建一个深色模式切换组件，让用户可以覆盖当前网站的系统配色方案偏好设置。
Dialog
构建一个模态或非模态对话框组件，该组件应具备无障碍功能、能妥善管理焦点，并能以用户在各个平台上期望的方式关闭。
加载旋转图标
构建一个加载旋转图标，向所有用户传达忙碌状态，遵循减少动画偏好设置，并高效地呈现动画。
抽屉式导航栏
创建一个抽屉式导航栏组件，当通过菜单按钮触发时，该组件会从侧边滑入并覆盖在现有页面内容之上，并在关闭时（通过滑动、点按外部或按 Esc 键）滑出。
进度环
构建一个进度环组件，以直观方式呈现任务或流程的完成状态，并支持在中心显示内容和采用与品牌一致的样式。
堆栈展开细目
构建全屏分层导航，让用户能够深入探索嵌套视图，并通过滑动或返回操作返回上一级，同时保持浏览器浏览记录同步。
设置复选框样式
设置复选框的样式，包括自定义图标、布局、颜色、选中/取消选中动画，同时保留原生功能和无障碍功能。
界面行为
为元素添加进入和退出滚动视口时的效果
在用户滚动时，为进入和退出滚动端口（或视口）的元素创建淡入、放大或其他复杂的显示类型效果。
锚点定位标签页下划线
在两个目标元素位置之间无缝过渡元素。例如，在之前选中的标签页和当前选中的标签页之间移动选中的标签页下划线。
为元素进入和退出添加动画效果
在元素添加到 DOM/从 DOM 中移除或其显示值切换时，平滑地隐藏/显示元素。
为元素添加进入和退出顶层的动画效果
为对话框、弹出式窗口和提示等元素在进入/退出顶层时添加动画效果。
构建可拖动元素
支持通过拖动在页面上移动浮动元素。
构建滚动视差效果
创建基于滚动的效果（例如视差），让前景层和背景层以不同的速率移动，从而在用户滚动时营造出深度感。
轮播 Snap 精彩集锦
在滚动贴靠轮播界面、图库或全页滑动体验中，以视觉方式突出显示当前贴靠的非互动项。例如，在贴靠时展开卡片，或显示隐藏的内容。
一致的跨文档过渡
在启动跨文档视图过渡之前，请确保关键页面状态已加载且稳定。这意味着，在过渡运行之前，系统会加载并应用关键 CSS 样式，加载并运行关键 JavaScript，并解析用户初始网页视图中可见的 HTML。
创建交错动画
在同级元素之间错开动画或过渡时间，以便每个元素在根据其在同级列表中的位置计算出的延迟时间后开始。
跨文档过渡
在全页网页导航之间创建流畅、无缝的过渡效果，例如淡入淡出、自定义显示效果或内容从一个页面到下一个页面的变形。
自定义按钮操作
使用声明式按钮命令、调用方命令、按钮命令、自定义命令或声明式切换操作，以声明方式将按钮连接到任何元素，从而触发自定义的应用特定操作。
声明式对话框和弹出式窗口控件
无需编写 JavaScript，即可通过按钮切换对话框或弹出式窗口的可见性。
定向导航过渡
通过动画呈现视觉状态变化，以反映用户导航流程的方向，例如在向前推进时从右侧滑入新内容，或在返回上一屏幕时从左侧滑入新内容。
群组元素过渡
使用相同的过渡逻辑同时过渡一组相似元素，例如从购物车中移除一件商品，并让所有其他商品以动画形式进入新位置。
突出显示文本范围
突出显示页面上的任意文本范围，例如搜索结果、拼写错误或协作编辑光标。
互动内容揭晓
创建互动式揭示效果，例如让聚光灯跟随用户的指针，揭示图片或界面部分中的细节。
兴趣触发的操作预览
当用户表示出兴趣（例如悬停、聚焦或长按）但尚未点击时，实时预览按钮的效果。
轻关闭对话框
创建一个可通过轻度关闭（即点击或点按对话框外部）来关闭的模态对话框
动画
使用 CSS 过渡、动画、滚动驱动的动画和视图过渡为界面添加动画效果，同时在合成器上保持运动，并遵循“减少动画”偏好设置。
移动 DOM 元素而不丢失状态
移动 DOM 元素或为其重新设置父级，而不会丢失重要的元素状态，例如互动状态（:focus/:active）、
<iframe> 加载状态、动画/过渡状态等永久性顶层界面
当底层 DOM 节点在 DOM 中移动或重新设置父级时，保持模态对话框、全屏元素或原生弹出式窗口可见且功能有效。
基于物理机制的缓动
创建自定义的基于物理特性的动画和过渡效果（例如弹跳和弹簧），这些效果比传统的加/减速曲线更自然、更吸引人。
平台控件关闭对话框
创建一个模态对话框，该对话框可通过特定于平台的标准用户操作关闭，例如在桌面平台上按
Esc 键，或在移动平台上执行“返回”或“关闭”手势防止模态对话框下方的页面滚动
在模态对话框打开时，防止底层页面滚动。
同文档过渡
通过平滑地改变其大小、位置或其他样式属性，在单页应用 (SPA) 中以视觉方式连接不同页面状态或导航中的持久元素（例如，将产品缩略图展开为全出血主打图片）。
作用域组件转换
在单个组件（卡片、列表、面板或其他子树）内为状态变化添加动画效果，同时页面的其余部分保持互动，其他过渡效果同时运行。
滚动贴靠实时反馈
当用户滚动浏览对齐到贴靠位置的内容时，在滚动操作完成之前，在关联的界面元素中提供实时视觉反馈。
滚动贴靠状态同步
将导航指示器、关联的内容面板和分析跟踪与可滚动容器中当前贴靠的内容同步。
滚动叙事
为目标元素上的视觉属性添加动画效果（例如淡化背景幕、改变背景颜色或打造滚动叙事体验），这些动画效果完全由另一个完全不同的元素的滚动条位置驱动。
搜索隐藏的内容
使用折叠菜单、标签页和“阅读更多”部分等模式隐藏内容，同时确保隐藏的文字在原生“在页面中查找”搜索期间显示、允许搜索引擎编入索引、支持网址片段深层链接，并保持 ARIA 无障碍功能。
为初始渲染设置滚动目标
构建一个可滚动的元素列表（例如图片轮播界面或聊天对话串），在初始渲染时，该列表可以显示滚动到视图中的特定元素。
悬停时显示提示
当用户将鼠标悬停在互动元素上、将焦点移到互动元素上或长按互动元素时，无需点击即可显示提示或补充信息。
空间导航（方向键焦点）
使用箭头键实现无障碍空间导航，使其在不同的布局模式（网格等）下都能正常运行
滑动即可删除
让用户能够通过水平滑动操作来处理列表中的内容（移除、归档、标记为已读等），以便他们无需点按单独的控件即可快速处理条目。
滑动即可查看
让用户在列表项或内容窗格上水平滑动，以显示关联操作按钮或侧边菜单，而不会自动触发操作。
在程序化滚动完成后触发效果
仅在通过程序化方式平滑滚动到目标元素后，才触发该元素上的视觉效果、动画或焦点更改。
二维平移
允许用户在两个方向上（无论是对角线方向还是在手势中途改变方向）自由平移或滚动二维表面（例如地图、缩放后的图片、无限画布或大型数据网格），而不会将手势锁定到单个水平轴或垂直轴。
表单
动画选择器
创建一个自定义选择组件，其下拉菜单具有动画效果。例如，菜单淡入或滑入视图，或者选项在被选中时呈现动画效果。
品牌一致的表单
让复选框、单选按钮、范围滑块和进度条与网站的调色板相匹配，而无需将其替换为自定义组件。
品牌一致的范围滑块
为原生范围滑块设置样式，使其具有自定义滑轨、滑块、填充和焦点状态，同时保留原生功能和无障碍功能。
品牌精选样式
创建自定义选择元素，其按钮、选择器、箭头图标和对勾标记均可与您的品牌或设计系统的排版、颜色、间距和边框处理方式完美契合。
构建遵循最佳实践的付款表单
构建一个付款表单，该表单可收集卡片详细信息，并支持正确的自动补全值和自动填充功能。
构建遵循最佳实践的登录表单
构建具有正确自动补全值和自动填充支持的登录表单。
构建遵循最佳实践的注册表单
构建一个具有正确自动补全值和自动填充支持的注册表单。
构建无障碍开关控件
使用原生 HTML 开关属性构建无障碍开关，在不支持时回退到样式化复选框。
构建遵循最佳实践的地址表单
构建具有正确自动补全属性和自动填充支持的地址表单。
自定义选择器布局
创建自定义选择器，其选项以独特或有趣的方式定位，而不是传统的堆叠选项列表。
表单字段自动适应内容
允许表单字段根据用户输入（例如，用户输入内容或选择其他选项）进行放大和缩小。应用大小上限和下限，创建符合页面设计的动态自适应表单字段。
表单
构建无障碍、安全且人性化的 Web 表单的最佳实践。在创建或修改表单、输入和提交流程时，请参考本指南。
使用 CSS :autofill 突出显示用户未修改的浏览器自动填充字段
使用 CSS 突出显示已由浏览器自动填充且未由用户修改的表单字段。
IME 安全的 Enter 键提交
在文本区域和单行输入（聊天、搜索、内嵌重命名）中安全地实现“按 Enter 键提交”功能，以便输入法 (IME) 用户避免提交不完整的文本。
必填字段反馈
仅在用户互动后，针对跳过或留空的必填表单字段提供出错提示，以避免过早报错，并确保反馈及时且与用户流程上下文相关。
富媒体选择工具（可自定义的 select）
创建自定义选择组件，其选项可以包含复杂的 HTML 格式（例如图片、图标和其他富文本格式），而不仅仅是纯文本。
选择菜单互动
仅在用户与控件互动后，才验证是否在选择菜单中选择了非默认选项。
短信动态密码表单验证
通过自动提取验证码和无障碍表单输入，验证用户电话号码和通过短信发送的动态密码。
在互动后验证输入
仅在用户完成初始互动后，才显示表单字段验证反馈（例如密码复杂性或电子邮件格式要求），避免在网页加载时或用户输入时过早显示错误。
HTML
无障碍 Web 组件
默认情况下，让自定义元素可供访问，通过 ElementInternals ARIA mixin 设置角色和 ARIA 状态，使用 delegatesFocus 管理焦点，并将 ARIA 关系保持在单个 shadow root 中。
自定义元素
定义、注册和管理自主自定义元素的生命周期，涵盖构造函数规则、生命周期回调、升级时机、特性/属性反射和命名规范。
与表单关联的自定义元素
使用 formAssociated 和 ElementInternals 让自定义控件以原生方式参与表单，提交自己的值，与约束验证集成，并对重置、停用和状态恢复做出反应。
HTML
针对现代 HTML 架构、语义、原生交互式 API（Dialog、Popover、Details）、焦点管理和资源优先级排序，提供以行动为导向的指南。在构建 Web 文档、实现原生叠加层或优化资源加载顺序时，请参考本指南。
预渲染自定义元素
在服务器端渲染自定义元素，然后就地对其进行水合，而无需重新渲染或出现无样式内容闪烁。
Shadow DOM、模板和槽
使用 Shadow DOM 封装组件的 DOM 和样式，使用 HTML 模板高效构建树，并使用槽投影使用者内容。
设置 Web 组件的样式
使用 :host 选择器、继承和自定义属性（用于主题设置）、::slotted 和 ::part 以及组件内的级联层和容器查询，跨 Shadow 边界设置样式。
Web 组件方向
本课程将介绍编写和使用 Web 组件的方向和跨领域原则，涵盖自定义元素、Shadow DOM、模板和槽、声明式 Shadow DOM、跨 Shadow 边界的样式设置、与表单关联的自定义元素以及无障碍要求。在构建可重复使用的界面组件、设计体系或服务器渲染的自定义元素时，请使用本指南。
CSS
添加向固有尺寸过渡的动画效果
让交互式组件（如折叠菜单、菜单和展开式卡片）在自然尺寸之间流畅地进行动画过渡。
使用固有尺寸进行计算
根据元素的固有大小计算其大小，同时确保其符合给定的设计限制。
基于子状态的样式设置
构建一个组件，使其根据其中一个子元素的状态更改其样式。例如，根据是否选中主题切换开关，以浅色或深色模式呈现的组件。
根据 at 规则支持情况有条件地应用 CSS
仅当浏览器支持特定 at 规则时，才会有条件地应用特定 CSS 规则或声明。
基于内容的样式
构建一个组件，使其根据是否包含特定子元素来更改其布局。例如，如果组件包含图片，则使用多列布局，否则默认使用单列布局。
CSS 布局和自适应设计
现代 CSS 布局，例如 flexbox、网格、子网格、容器查询、锚点定位和固有尺寸。在设计自适应界面组件或页面布局时，请使用此技能。
CSS：现代架构
针对现代 CSS 架构（包括级联、选择器、作用域、嵌套和设计令牌）的行动导向型指南。在创作样式或管理设计体系时，请使用本指南。
设计令牌响应性
定义高阶设计令牌，例如密度模式（紧凑、舒适、宽松）或主题，并让后代组件直接以适合组件的方式对更改做出反应。
平滑扩缩
根据父级容器的大小（而非使用固定断点）平滑缩放字体大小、间距和媒体大小等内容
单个转换属性
为单个元素上的各个 CSS 转换属性（例如平移、旋转、缩放）单独添加动画效果或替换这些属性，而不受其他转换属性的影响。
溢出剪裁控件
调整元素的可视剪裁边界，使其与内容边缘、内边距边缘或边框边缘对齐，或与其中任何一个边缘保持指定的偏移量，从而更精细地控制内容的剪裁方式。
使用 CSS 函数减少样式重复
将复杂或动态的样式逻辑封装到可重用的函数（例如，根据一组输入参数计算渐变的函数）中，以减少过多的样式重复。
自适应设计
构建可适应容器和视口大小的界面，包括容器查询、动态视口单位、宽高比和自适应排版。
选择器和 @ 规则组合
根据选择器和条件 @ 规则的交集或并集定位元素，同时最大限度地减少重复。
语义组件适配
使用 CSS 容器样式查询构建可根据语义上下文调整视觉逻辑的组件。
自适应尺寸的样式
构建一个组件，其样式可以有条件地取决于其自身的宽度或高度，而不是视口的宽度或高度。例如，卡片组件可以根据其大小更改布局，而行动号召按钮可以根据其宽度有条件地显示辅助文本。
使用 :has() 为父级设置样式
当表单字段无效时，为其父元素（例如标签或字段集）设置样式。
根据数量和索引设置同级元素的样式
创建动态视觉光谱或布局排列，自动适应组中元素的数量。
JavaScript
使用 Temporal 计算事件时间差和设置时长格式
使用 Temporal.Duration 和 Intl.DurationFormat 计算日期和时间之间经过或剩余的时间、平衡时长单位，以及设置人类可读的本地化时长格式。
使用 Temporal 捕获与位置无关的数据和部分日期
使用 Temporal Plain 类型，对与位置无关的日历日期、挂钟时间、部分日期（周期性生日、信用卡到期日）和周期性月度间隔进行建模，而不会出现时区偏差。
使用 Temporal 协调全球事件
通过将未来的会议或活动明确绑定到地理 IANA 时区来安排这些会议或活动，这样无论夏令时 (DST) 转换、时钟更改期间“跳过”或“重复”的小时数如何，活动时间都能保持准确。
使用 Temporal.Instant 对高精度时间戳进行排序
使用 Temporal.Instant 解析、排序和测量亚毫秒或纳秒级 ISO 8601 时间戳之间的间隔，而不会发生日期截断冲突。
通过 Temporal 支持全球日历系统
为国际用户准确显示和计算非公历系统（例如伊斯兰历、希伯来历或农历）中的日期。
WebAssembly
性能
拆分长任务
拆分繁重的同步处理（复杂计算和/或长循环）或 DOM 更新，让浏览器能够处理用户输入并重新绘制屏幕。
计算总前台时间
计算用户实际浏览网页的总时间，不包括标签页处于后台的时间。
条件式异步依赖项
有条件地加载或初始化异步依赖项（例如，为缺失的 Web 功能导入 polyfill），而无需在网页的所有脚本依赖项之间进行复杂的编排。
对多个分析事件进行去抖动和批处理
在单个信标中对多个分析、遥测和 Core Web Vitals 事件进行去抖动和批处理，以最大限度地减少网络争用并降低服务器负载，同时仍提供实时更新。
延迟渲染繁重内容
通过延迟呈现用户无法立即看到的内容，缩短内容丰富的网页（例如，包含长信息流、大量文章或复杂信息中心的网页）的呈现时间。
推迟工作，直到滚动结束
将 DOM 更新、数据提取、分析跟踪或布局重新计算等高开销操作推迟到滚动完成后进行，以保持流畅滚动性能。
提供经过优化的装饰性图片
同时提供新一代图片格式（如 AVIF 或 WebP）和多种像素密度（如 1x 和 2x），以提供经过优化的装饰性图片（如背景、界面图标或复杂遮罩），让浏览器能够根据用户设备的功能，动态协商文件大小和视觉质量的最佳组合。
降低后台提取的优先级
降低使用 Fetch API 进行后台数据提取的优先级，以防止与用户发起的请求发生网络争用。
检测初始可见性状态
可靠地确定网页最初是否在后台加载，即使在用户将网页置于前台后异步加载脚本的情况下也是如此。
高效的后台处理
当组件不在屏幕上时，暂停后台 JavaScript 执行（例如
<canvas> 动画、WebGL 渲染或高频 WebSocket 数据轮询），并在组件滚动回视图时及时恢复执行，从而节省系统资源并延长电池续航时间。通过状态缓存实现更快的 SPA 视图过渡
通过保留单页应用 (SPA) 中先前访问过的视图的结构化 DOM 状态，而不是在每次导航时销毁并重新构建它们，从而更快地转换回这些视图。
无闪烁的客户端 A/B 测试
使用客户端 JavaScript 投放和呈现 A/B 测试、多变量测试或其他实验，以更改或注入 HTML、CSS 和 JavaScript，而无需先显示原始内容，然后再闪烁或闪现以显示实验内容。
找出 INP 较差的原因
找出运行缓慢的 JavaScript 以及导致 Interaction to Next Paint (INP) 响应速度不佳的其他原因。
识别运行繁重的 JavaScript
找出导致长动画帧的最主要脚本
提升下一个网页的加载性能
通过预提取或预渲染用户接下来可能访问的网页，提升网页加载性能。
延迟加载视频和音频
推迟下载屏幕外视频和音频资源（包括视频海报图片和预加载的媒体数据），直到媒体播放器接近视口，以节省带宽并减少初始网页加载期间的网络争用。
衡量互动和软导航绘制时间
衡量用户互动和客户端导航在屏幕上渲染新的内容更新所需的时间。
优化图片优先级
优化 Largest Contentful Paint (LCP) 候选图片的加载优先级，并降低非关键图片的优先级，以减少关键资源加载延迟。
优化预加载优先级
优化预加载内容的相对优先级，以减少关键资源加载延迟。
优化脚本优先级
优化脚本的加载优先级，方法是提高关键异步脚本的优先级，并降低非必需脚本或正文末尾脚本的优先级，从而改进加载顺序并减少延迟。
优化复杂布局中的互动
避免在复杂布局（例如数据密集型信息中心或电子表格样式网格）中重新计算布局，从而使互动更敏捷、更灵敏（降低 Interaction to Next Paint [INP] 得分）。
乱序 (OOO) HTML 流式传输
以声明方式更新网页，其中内容稍后会流式传输到同一 HTML 文档中，或通过命令式 JavaScript API 进行更新。
性能
优化现代 Web 应用的可行指南。在审核性能、优化加载指标、修复缓慢互动和优化 Core Web Vitals（LCP、INP、CLS）时，请使用本指南
可靠地衡量完整会话分析和遥测数据
在用户访问网页的整个过程中，可靠地跟踪分析数据、Core Web Vitals、错误和遥测数据，并延迟发送数据，直到用户离开网页。
分辨率优化伪元素
在 CSS 伪元素（例如
::before 和 ::after）中使用经过分辨率优化的图片，以减少 DOM 节点数量。按优先级安排任务
安排具有不同优先级的任务，确保关键工作优先运行，而后台工作则推迟执行。
无障碍
无障碍编码指南
提供实用的编码指南，帮助您构建无障碍 Web 应用，涵盖语义 HTML、焦点管理、表单、媒体和测试。在审核或实现无障碍功能、键盘导航或 ARIA 时，请使用此技能。
无障碍错误通知
将程序化无障碍状态（例如 aria-invalid）与视觉 :user-invalid 状态同步，以确保屏幕阅读器用户仅在互动后收到错误反馈，从而镜像视觉体验。
无障碍生成的内容
以保持无障碍的方式使用 CSS 生成的内容（
::before/::after），包括为装饰性内容提供替代文本。遵循操作系统文本缩放
遵循操作系统对网页的文本缩放偏好设置，以便字体大小、布局和基于 rem 的测量值遵循用户的无障碍设置。
安全
比较和验证网站源和网站
在跨文档消息和网址之间安全地比较和验证网站源和网站，而无需进行容易出错的字符串解析。
使用 WebCrypto 在客户端加密数据
使用公钥封装或密钥协商（包括混合和后量子保护）建立共享密钥，并在浏览器中使用经过身份验证的加密技术加密敏感数据。
本地网络访问权限
从公共 Web 应用访问用户本地网络或环回接口上的资源。
通行密钥身份验证
使用通行密钥对回访用户进行身份验证，以便其进行主要登录。
条件式创建通行密钥（登录后推广）
在现有用户成功使用密码登录后，为其静默注册通行密钥。
通行密钥管理
让用户查看和管理其账号中注册的通行密钥。
通行密钥重新身份验证
在执行敏感操作之前，使用已登录用户的现有通行密钥验证其身份。
通行密钥注册
为现有用户账号注册通行密钥。
通行密钥方向
在 Web 应用中实现 WebAuthn 和通行密钥的全面指导和跨领域原则。在处理通行密钥注册、身份验证、管理或重新身份验证时，请使用本指南。
使用 Trusted Types 防范基于 DOM 的 XSS 攻击
通过定义 Trusted Types 政策来清理不受信任的 HTML，在写入 innerHTML 等 DOM 接收器时使用该政策，并通过内容安全政策强制执行 Trusted Types，从而防范基于 DOM 的 XSS 攻击。
通过即时界面模式快速登录
在跳转到登录页面或中断用户工作流程之前，使用已保存的通行密钥或密码就地对回访用户进行身份验证。
使用连接许可清单限制出站网络连接
限制页面或工作器只能与明确列入许可清单的网络端点通信，以防止未经授权的第三方请求和客户端数据渗漏。
清理不受信任的 HTML
通过移除不安全的元素和属性，安全地解析和显示用户输入中不受信任的 HTML 内容。
使用子资源完整性、CORS 和引荐来源网址政策保护外部子资源
验证从第三方来源加载的外部脚本、样式表、字体和图片的加密完整性，并控制这些请求是否发送凭据或引荐来源网址。
使用 WebCrypto 对数据进行签名和验证
在浏览器中使用传统或抗量子（后量子）非对称密钥对消息、令牌或制品进行签名和验证，以确保数据完整性和真实性。
验证邮箱所有权
在账号创建、登录或恢复过程中验证用户是否拥有某个邮箱，而无需发送动态密码或魔法链接邮件。
网络安全
面向 Web 开发者的预防性安全指南（XSS、CSP、Cookie、跨域隔离）。使用此技能可指导您安全地审核、测试和部署安全政策。
隐私权
PWA
内置 AI
语言检测
检测用户生成的内容或现有网站内容的语言。
语言模型
使用 Prompt API 在浏览器中运行设备端自然语言推理，支持流式输出、结构化 JSON 响应和多轮会话管理。
Summarizer
使用设备端 Summarizer API 总结文本内容。
译者
使用设备端 Translator API 在不同语言之间翻译文本。