【翻译】2026 年 Web 互操作性计划正式发布原文链接：Announcing Interop 2026 作者：Yul

原文链接：Announcing Interop 2026

作者：Yulun Wu and Jen Simmons

对于 Web 开发者、设计师和浏览器爱好者而言，这是一则振奋人心的消息 ——2026 年 Web 互操作性计划（Interop 2026）正式发布，本计划将继续秉持提升跨浏览器互操作性的使命。这是我们连续第五年与Google、Igalia、Microsoft和Mozilla团队携手合作，致力于让 Web 技术在各款浏览器中实现更一致、更可靠的表现。

2026 年 Web 互操作性计划简介

让网站在所有浏览器中正常运行并非易事，尤其是当不同浏览器引擎对同一 Web 技术的实现方式存在细微差异时。互操作性计划通过联合主流浏览器引擎团队，在同一时间段针对同一批功能进行优化，攻克这一难题。我们将依据官方 Web 标准（定义各类 Web 技术工作原理的正式技术规范），判定每项功能的实现是否完全合规，助力打造更可靠、更一致的 Web 开发平台，加速行业发展。

Safari 浏览器现已实现 2026 年互操作性计划中的多项功能，事实上，我们是首家推出contrast-color()函数、媒体伪类、shape()函数和作用域自定义元素注册表的浏览器。此外，Safari 还支持锚点定位、样式查询、自定义高亮、滚动吸附、视图过渡等诸多特性。我们十分欣喜这些技术能成为 2026 年互操作性计划的重点优化方向，这将确保它们在所有浏览器中落地实现，同时消除现存的互操作性差异。

我们还将重点实现对以下功能的支持：高级attr()函数、IndexedDB 的getAllRecords()方法、WebTransport 协议，以及 WebAssembly 的 JavaScript Promise 集成 API（JSPI）。这四项功能的优化占 2026 年互操作性计划评分的 20%，它们都是能解决实际开发需求的优秀新特性。

2026 年重点优化方向

互操作性计划通过Web 平台测试（Web Platform Tests） 衡量浏览器的互操作性，这是一套自动化测试体系，用于检验浏览器是否符合 Web 标准。2026 年的计划目标宏大，涵盖 20 个重点优化方向，其中 15 个为全新方向，5 个为 Interop 2025 年计划的延续方向。

锚点定位
高级 attr () 函数
容器样式查询
contrast-color () 函数
自定义高亮
对话框与弹出层增强特性
Fetch 上传与范围请求
IndexedDB 的 getAllRecords () 方法
WebAssembly 的 JSPI 接口
媒体伪类
导航 API
作用域自定义元素注册表
滚动驱动动画
滚动吸附
shape () 函数
视图过渡
Web 兼容性
WebRTC
WebTransport
CSS 缩放

锚点定位

锚点定位是 2025 年互操作性计划的延续优化方向，去年我们已取得重大进展，让开发者能够轻松实现元素间的相对定位。今年我们将重点梳理该特性的标准规范、解决测试中的问题，同时提升这一强大布局功能的可靠性。

高级 attr () 函数

CSS 的attr()函数可直接将 HTML 属性值引入 CSS 样式中，打通结构化数据与视觉展示之间的壁垒，让样式无需借助 JavaScript 即可实现更高的动态性和上下文感知能力。此前attr()函数仅支持content属性，而高级 attr () 函数对其进行了扩展，支持所有 CSS 属性并提供类型转换能力 —— 开发者可将 HTML 属性值作为颜色、长度、角度等数据类型在 CSS 中使用。目前该特性的标准规范已解决相关安全问题，各浏览器厂商将携手推出这一备受期待的功能，确保其具备良好的跨浏览器互操作性。

容器样式查询

容器样式查询可根据指定容器中自定义属性（即 CSS 变量）的值，为元素条件性应用样式。正如容器尺寸查询能让 CSS 根据容器大小做出响应，样式查询可让 CSS 适配主题值、状态标记和其他上下文数据。

@container style(--theme: dark) {
  .card {
    background: #1a1a1a;
    color: #ffffff;
  }
}

容器样式查询近年来已逐步在各浏览器落地，其中包括 Safari 18.0。2026 年互操作性计划将确保这一强大工具在所有浏览器中实现一致的表现。

contrast-color () 函数

CSS 中的contrast-color()函数会返回黑色或白色中的一种，由浏览器根据函数中指定的颜色，自动选择对比度更高的颜色作为返回值。

.button {
  background: var(--brand-color);
  color: contrast-color(var(--brand-color));
}

由浏览器自主选择对比色，能让设计系统的构建更简洁，开发者无需手动定义所有颜色搭配方案。Safari 和火狐浏览器已于 2025 年实现对该函数的支持，2026 年互操作性计划将确保这一实用函数在所有浏览器中表现一致。

注：contrast-color()函数并非能完美解决所有可访问性问题，更多细节可参阅如何让浏览器在 CSS 中自动选择对比色一文。

自定义高亮

CSS 自定义高亮 API 允许开发者为任意文本范围设置样式，且无需向 DOM 中添加额外元素。开发者可通过 JavaScript 创建高亮文本范围，再借助伪元素为其设置样式。

::highlight()伪元素非常适合实现页面内搜索结果高亮、自定义代码编辑器的语法高亮、开发支持多用户协作编辑并显示光标位置的应用，以及所有需要在不修改文档结构的前提下对文本进行视觉标记的场景。::target-text伪元素则可为用户点击含文本片段的链接后滚动定位到的文本设置样式。

目前各浏览器正逐步实现该特性，2026 年互操作性计划将确保这些高亮功能在跨浏览器环境下表现一致，为开发者打造基于文本交互的可靠工具。

对话框与弹出层增强特性

<dialog>元素和 popover 属性彻底改变了开发者在 Web 端构建浮层的方式。其中对话框特性曾入选 2022 年互操作性计划，弹出层特性则入选 2024 年计划。今年，该特性的三项最新增强功能成为 2026 年互操作性计划的重点优化方向。

closedby属性可控制用户关闭对话框的方式：

<dialog closedby="any">
<!-- 点击外部区域或按下ESC键均可关闭 -->
</dialog>

popover="hint"属性可创建次级弹出层，不会关闭其他自动弹出层，非常适合实现工具提示：

<div popover="hint" id="tooltip">
  该工具提示不会关闭菜单！
</div>

:open伪类可匹配处于打开状态的元素，适用于<dialog>、<details>和<select>元素：

dialog:open {
  animation: slideIn 0.3s;
}

这些增强特性让开发者能够更轻松地构建符合可访问性标准、用户体验友好的 UI 浮层。

Fetch 上传与范围请求

fetch()方法新增了三项强大的功能，用于处理文件上传和部分内容请求。

可读流请求体支持真正的流式上传，开发者可直接上传大文件或实时数据，无需先将所有内容加载到内存中：

await fetch('/upload', {
  method: 'POST',
  body: readableStream,
  duplex: 'half'
});

增强的 FormData 支持优化了多部分内容的上传和响应处理。

Range 请求头支持允许发起部分内容请求，这对于视频流播放和断点续传至关重要：

fetch('/video.mp4', {
  headers: { 'Range': 'bytes=0-1023' }
});

这些增强特性让fetch()方法的能力媲美各类专用 API，减少了开发者开发自定义解决方案的需求。

IndexedDB 的 getAllRecords () 方法

IndexedDB 是一款底层 API，允许开发者在浏览器中存储大量结构化数据，包括文件和二进制大对象（Blob），各浏览器已支持该 API 多年。

如今，IndexedDB 迎来重大性能提升 ——IDBObjectStore和IDBIndex新增了getAllRecords()方法，支持批量、反向获取数据记录：

const records = await objectStore.getAllRecords({
  query: IDBKeyRange.bound('A', 'M'),
  count: 100,
  direction: 'prev'
});

2026 年互操作性计划仅将该新方法纳入优化范围，相关评分仅统计getAllRecords()方法的测试通过率，而非整个 IndexedDB 的测试情况。

WebAssembly 的 JSPI 接口

WebAssembly 为在浏览器中运行高性能应用打开了大门，涵盖游戏、生产力工具、科学模拟等诸多领域。但该技术存在一个根本性的问题：这类应用最初大多是为文件 IO、网络请求等同步（阻塞式） 操作的环境开发的，而 Web 环境的核心特性是异步。

JavaScript Promise 集成 API（JSPI）则打通了这一壁垒，它让期望执行同步操作的 WebAssembly 代码，能与 JavaScript 基于 Promise 的异步 API 无缝协作，无需重写整个应用。这意味着开发者可更轻松地将现有的 C、C++ 或 Rust 应用移植到 Web 端，让更多软件能在浏览器中运行。

2026 年互操作性计划将确保 JSPI 接口在各浏览器中表现一致，让 WebAssembly 成为开发复杂应用的更可行平台。

媒体伪类

多年来，我们一直提议将媒体伪类纳入互操作性计划，如今它终于入选 2026 年的优化名单，我们倍感欣喜！

共有 7 个 CSS 媒体伪类可根据 `` 和<video>元素的播放状态应用样式：

:playing — 媒体正在播放
:paused — 媒体已暂停
:seeking — 用户正在定位到新的播放位置
:buffering](developer.mozilla.org/docs/Web/CS…) — 媒体正在缓冲
:stalled — 播放已中断
:muted — 音频已静音
:volume-locked — 音量无法调节

这些伪类早已在 Safari 浏览器中实现，但由于其他浏览器均未支持，大多数开发者从未使用过，甚至不知道它们的存在。开发者不得不借助 JavaScript 来同步 UI 状态与媒体播放状态。

而在 CSS 中使用媒体状态伪类会更简洁、更高效：

video:buffering::after {
  content: "加载中...";
}
audio:muted {
  opacity: 0.5;
}

将媒体伪类与:has()选择器结合使用时，功能会更强大 —— 开发者可根据媒体播放状态为页面上的任意元素设置样式，而非仅局限于媒体播放器的子元素。

article:has(video:playing) {
  background-color: var(--backgroundColor); 
  color: contrast-color(var(--backgroundColor));
  transition: background-color 0.5s ease;
}

更多关于:has()选择器的强大功能，可参阅将:has () 用作 CSS 父选择器及更多用法一文。

导航 API

开发过单页应用的开发者或许都有过这样的困扰：需要通过history.pushState()方法和popstate事件管理导航状态。而导航 API为开发者提供了更简洁、更强大的方式，来拦截和控制浏览器的导航行为。

该特性是 2025 年互操作性计划的延续方向，去年我们已取得重大进展，让开发者能够初始化、拦截和修改浏览器的导航操作。今年我们将继续优化其互操作性，将 2025 年 92.3% 的测试通过率进一步提升。此外，该特性还新增了precommitHandler配置项，允许开发者将导航操作延迟至关键资源加载完成后执行，避免页面出现不连贯的未加载内容闪烁问题。

navigation.addEventListener('navigate', (e) => {
  e.intercept({
    async precommitHandler() {
      // 提交导航前加载关键资源
      await loadCriticalData();
    },
    async handler() {
      // 渲染新视图
      renderPage();
    }
  });
});

2026 年互操作性计划将确保导航 API 在各浏览器中稳定运行，为 Web 应用开发奠定坚实基础。

作用域自定义元素注册表

开发 Web 组件时，开发者或许遇到过这一令人头疼的限制：全局的customElements注册表要求整个应用中，同一个标签名只能对应一个自定义元素定义。当两个不同的库都定义了<my-button>组件时，就会发生冲突。

CustomElementRegistry()构造函数则解决了这一问题，它允许开发者创建作用域注册表，应用的不同部分或不同的影子根（shadow root），可为同一个标签名定义不同的自定义元素。

const registry = new CustomElementRegistry();
registry.define('my-button', MyButtonV2);
shadowRoot.registry = registry;

该特性对于微前端、组件库开发，以及所有需要集成第三方 Web 组件的场景而言，都具有重要价值。

Safari 26.0 是首家实现作用域自定义元素注册表的浏览器，其入选 2026 年互操作性计划，将确保这一功能在所有浏览器中表现一致。

滚动驱动动画

滚动驱动动画让开发者能更轻松地创建随滚动位置变化的动画效果，如今这一功能可完全通过 CSS 实现，无需 JavaScript。当用户滚动页面时，动画会同步推进，开发者可借助该功能实现滚动触发的元素显隐、进度指示器、视差效果和交互式叙事体验。

开发者可通过标准的 CSS 关键帧定义动画，再通过animation-timeline属性将其与滚动行为关联：

.reveal {
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

使用view()可在元素进入和退出视口时触发动画，使用scroll()则可将动画与滚动容器的位置绑定。更多细节可参阅纯 CSS 实现滚动驱动动画指南一文。

Safari 26.0 已实现对滚动驱动动画的支持，2026 年互操作性计划将确保该特性在所有浏览器中表现一致。

滚动吸附

CSS 滚动吸附可控制滚动容器内的平移和滚动行为，轻松实现轮播图效果：

.carousel {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}
.carousel > * {
  scroll-snap-align: center;
}

所有现代浏览器已支持滚动吸附特性多年，但与许多早期的 CSS 规范一样，该特性的规范在早期浏览器实现后经过了多轮修改，导致其跨浏览器互操作性极差。如今该特性的 Web 标准已日趋成熟，是时候重新优化其互操作性了。这正是互操作性计划的价值所在 —— 联合所有浏览器团队聚焦某一特性，通过自动化测试发现不一致的实现和分歧点。

shape () 函数

多年来，开发者若想为clip-path或shape-outside属性创建复杂的裁剪路径，只能选择仅支持直线的polygon()函数，或无法根据元素尺寸自适应的 SVG 路径。

而全新的shape()函数允许开发者通过类路径指令（move、line、curve）创建复杂形状，它兼具两者的优势 —— 既有 SVG 路径的曲线绘制能力，又支持基于百分比的坐标，可随元素尺寸变化自适应。

.element {
  clip-path: shape(
    from 0% 0%,
    line to 100% 0%,
    line to 100% 100%,
    curve to 0% 100% via 50% 150%,
    close
  );
}

Safari 18.4 已实现对shape()函数的支持，我们期待 2026 年互操作性计划能推动各浏览器完善该特性的实现，让开发者能放心地用它绘制复杂的、自适应的曲线形状。

视图过渡

视图过渡是 2025 年互操作性计划的重点优化方向，彼时的优化范围仅包括同文档视图过渡和view-transition-class属性。这些特性让单页应用中不同 UI 状态之间的过渡能实现流畅的动画效果，同时开发者可灵活控制过渡样式。

2025 年 Safari 浏览器在视图过渡特性的测试中取得了 99.2% 的通过率，但该特性的整体跨浏览器互操作性通过率仅为 90.8%，因此团队决定将该特性的测试用例延续至 2026 年，继续优化。

2026 年的优化范围将扩展至跨文档视图过渡，让用户在网站的不同页面间导航时，也能实现流畅的动画过渡，而非页面加载时的突兀跳转。Safari 18.2 已实现跨文档视图过渡特性，更多细节可参阅两行代码实现跨文档视图过渡，现已可在所有网站使用一文。

Web 兼容性

Web 兼容性指的是实际的网站能否在某款浏览器中正常运行。当一个网站在一款浏览器中能正常工作，在另一款中却无法运行时，就出现了兼容性问题。该优化方向选取了一小部分 Web 平台测试用例，这些用例在部分浏览器中的失败，会导致实际网站在其他浏览器中无法运行，给 Web 开发者和用户都带来困扰。

互操作性计划每次将 Web 兼容性纳入优化范围时，都会针对不同的兼容性难题。2026 年的 Web 兼容性优化工作包括：

ESM 模块加载：确保循环模块记录和多个顶层 await 语句能在各浏览器中一致运行；
滚动事件与动画事件的执行时序：确保两类事件按可预测、互操作的顺序触发；
标准user-select属性支持：替代仅受 webkit 内核支持的-webkit-user-select，该属性用于控制用户是否可选择文本。

WebRTC

Web 实时通信技术（WebRTC）支持浏览器之间直接进行实时的音频、视频和数据通信，无需插件或中间服务器。开发者可借助该技术构建视频会议应用、直播平台、点对点文件共享工具和协作编辑工具。

2025 年互操作性计划中，WebRTC 的测试通过率已达 91.6%，2026 年该特性将继续作为优化重点，在去年的基础上进一步完善。我们将解决 WebRTC 核心规范中长期存在的各类互操作性问题。

WebTransport

WebTransport 协议基于 HTTP/3，为客户端与服务器之间的数据传输提供了现代化的方式，支持在单个连接上通过多个流实现低延迟的双向通信，既提供类似 UDP 的不可靠数据报支持（追求传输速度），也提供类似 TCP 的可靠流支持（保证数据交付）。

const transport = new WebTransport('https://example.com/endpoint');
await transport.ready;
const stream = await transport.createBidirectionalStream();
// 高效地传输流数据

WebTransport 非常适合游戏、实时协作工具，以及所有需要比 WebSocket 更强的控制能力、但又不想处理 WebRTC 复杂性的应用。其入选 2026 年互操作性计划，将确保该协议在所有浏览器中表现一致，成为实时数据传输的可靠选择。

CSS 缩放

CSS 的zoom属性可缩放元素及其内容，影响页面布局并让元素占据更多（或更少）的页面空间。与仅实现视觉缩放的transform: scale()不同，zoom属性会改变元素在页面布局中的占位方式。

.card {
  zoom: 1.5; /* 元素放大至150%，并占据更多页面空间 */
}

尽管zoom作为非标准属性已被各浏览器支持多年，但在边界场景下，以及与其他布局特性的协作中，始终存在表现不一致的问题。如今该属性已被纳入标准规范，作为 2025 年计划的延续方向，CSS 缩放将再次成为 2026 年互操作性计划的优化重点。

调研方向：未来展望

除上述重点优化方向外，2026 年互操作性计划还包含四个调研方向。各浏览器团队将围绕这些方向，评估当前的测试基础设施现状，梳理阻碍技术发展的各类问题。

可访问性测试

可访问性测试是往年调研方向的延续，旨在推动各浏览器实现一致的可访问性树。该工作将在 2024 年互操作性计划的基础上，完善 Web 平台测试的可访问性测试基础设施，确保可访问性特性在各浏览器中可靠、一致，助力开发者打造更具包容性的 Web 体验。

JPEG XL 图片格式

JPEG XL 是新一代光栅图形格式，支持动画、透明通道，以及有损和无损压缩，Safari 17.0 已实现对该格式的支持。本次调研将重点开发全面的测试套件，让该特性能够被合理测试，为其未来纳入互操作性计划的重点优化方向奠定基础。

移动端测试

移动端测试调研始于 2025 年，今年我们将重点完善移动端专属特性的测试基础设施，例如动态视口变化，这些特性对于构建适配移动设备的响应式 Web 体验至关重要，全球数十亿用户都依赖于这类体验。

WebVTT 字幕格式

WebVTT 调研是 2025 年计划的延续，旨在解决 Web 平台面临的一个关键难题。开发者表示，WebVTT 在各浏览器中的表现不一致，是他们选择其他字幕和字幕说明方案的主要原因。去年我们对 WebVTT 的投入主要集中在验证和修复现有测试套件，同时根据需要修改相关标准规范。今年我们将继续这一工作，确保同步文本轨道和隐藏式字幕能在 Web 端无缝运行。

打造更具互操作性的 Web 生态

2026 年 Web 互操作性计划涵盖了 20 个对 Web 开发者至关重要的优化方向。其中attr()和contrast-color()等函数，为开发者打造 CSS 架构提供了更灵活的方式；滚动驱动动画、视图过渡等特性，让开发者无需借助 JavaScript 就能创建更流畅、更具吸引力的交互体验；WebTransport 和导航 API 等特性，则为开发现代 Web 应用提供了更强大的工具。

同样重要的是，部分优化方向致力于解决长期存在的实现不一致问题 —— 确保滚动吸附特性可靠运行、推动各浏览器完善shape()函数的实现、解决让开发者头疼并导致网站故障的实际兼容性问题。

WebKit 团队致力于让这些特性在所有浏览器中实现一致的表现。无论你是在构建设计系统、单页应用、视频流平台，还是其他各类 Web 产品，2026 年互操作性计划都将为你打造更可靠的开发基础。

让我们携手共进，让 Web 生态变得更好！