WWDC25 新闻
Safari 26 测试版中的 WebKit

2025 年 6 月 9 日

作者：Jen Simmons, Saron Yitbarek, Jon Davis, Richard Robinson, Eddy Wong, Brandel Zachernuk, Marcos Cáceres, Tim Nguyen, Daniel Liu, Razvan Caliman, Blaze Burg, Qianlang Chen, Brian Weinstein, Aditya Keerthi, Karl Dubost, David Johnson, Luming Yin

欢迎来到 WWDC25！本周我们有很多关于 Web 技术的激动人心的新闻要与您分享。不要错过我们的七场专题讲座，包括Safari 和 WebKit 的新功能。

今天发布了 Safari 26 的测试版，带来了 67 个新功能和 107 项改进。我们将在本文中详细介绍它们。但首先——Safari 26？Safari 19 去了哪里？

您可能已经在今天的 WWDC25 主题演讲中看到，macOS、iOS、iPadOS、visionOS 和 watchOS 都已重新标记，现在共享相同的版本号——26（代表 2026 年）。Safari 也正在重新编号。

四年前，我们统一了 Safari 在所有平台上的版本号，并开始用 X.Y 数字标记每次更新，例如：Safari 16.0、Safari 17.2 和 Safari 18.4。这一改变使我们所有的发布对 Web 开发者来说都更加显眼。Can I Use 和 MDN BCD 都开始显示每年七个版本中新 Web 技术的数据。

虽然版本号从 18.x 跳到了 26.x，但 Safari 小版本发布中包含对底层 Web 技术的重大改进的方式将保持不变。您作为网站开发者最关心的变化将继续全年出现。

那么，让我们来看看今天在 Safari 26 测试版中推出的 Web 技术吧。

SVG 图标

Safari 26 测试版现在支持 SVG 文件格式作为界面中所有图标位置（包括网站图标）的图标。

多年来，网站图标只显示在浏览器窗口的 URL 栏中，或在收藏夹菜单中。现在，图标在浏览器中的各种位置以截然不同的大小显示。这包括 Safari 启动页，其中图标表示阅读列表、iCloud 标签页、建议和收藏夹中的内容。对于 Web App，这个相同的图标表示用户主屏幕或 Dock 中的网站。当然，图标也用于 Safari 标签页和菜单。

通过使用 SVG 文件作为图标，您可以利用无限的矢量缩放。您只需依靠 Safari 完成创建多种大小的栅格化图标以用于不同位置的工作。而且 SVG 文件通常比常用的 .png 文件下载量更小。

数据 URL 图像现在也支持作为图标，允许您在文档中嵌入小文件。

iOS 和 iPadOS 上每个网站都可以成为 Web App

自 2008 年 1 月 iPhone OS 1.1.3 发布“添加到主屏幕”功能以来，iPhone 用户就能够将网站图标放在主屏幕上以便快速访问。轻点图标会在 Safari 中打开网站。

八个月后，随着 iPhone OS 2.1 的发布，Web 开发者可以开始使用 <meta name="apple-mobile-web-app-capable" content="yes"> 标签将他们的网站配置为“看起来更像一个原生应用”的独立模式。2013 年，W3C 开始了 Web 应用清单的标准化进程，使得通过 JSON 清单文件配置 Web 应用行为成为可能。对 Web 应用清单的支持于 2014 年 11 月开始在浏览器中落地，并于 2018 年 3 月随 iOS 11.4 添加到 Safari 中。

在过去的 17 年里，如果网站有正确的 meta 标签或 Web 应用清单 display 值，并且用户将其添加到 iOS 或 iPadOS 的主屏幕，轻点图标就会将其作为 Web 应用打开。如果网站未如此配置，轻点图标则会在浏览器中打开网站。

在 Mac 上，我们在 2023 年 9 月引入 Mac 上的 Web 应用时采取了不同的方法。在那里，网站是否包含 Web 应用清单并不重要——它总是作为 Web 应用打开。我们不希望用户因为不可见技术的存在或缺失而体验到神秘的行为差异。用户应该有一致的体验。

现在，我们将这种新行为带到 iOS 和 iPadOS。默认情况下，添加到主屏幕的每个网站都会作为 Web 应用打开。如果用户更喜欢添加一个在默认浏览器中打开的书签，他们可以关闭“作为 Web 应用打开”，即使该网站已配置为 Web 应用。这由用户决定。并且用户界面始终保持一致。

iPhone in the process of adding a website to the Home Screen. The UI shows the site icon, editable name, and a toggle turned on to Open as Web App.

当然，这一改变并没有移除 WebKit 当前对 Web 应用功能的任何支持！如果您构建的网站有 Web 应用清单，那么它提供的所有好处都将成为用户体验的一部分。如果您在清单中定义了图标，它们就会被使用！如果您想通过使用 Service Worker 提供离线体验，那太棒了！

我们重视渐进增强和关注点分离的原则。所有相同的 Web 技术都可供您作为开发者使用，以构建您希望构建的体验。现在，除了 HTML 文件和 URL 的基本要素之外，不再需要任何额外要求即可向用户提供 Web 应用体验。作为开发者，您可以随意添加 CSS、JS、Web API 等。用户可以将任何网站添加到主屏幕，并将其作为 Web 应用打开。

HDR 图像

人眼通常能够同时看到被强光照亮和处于暗影中的物体。您的眼睛看到的亮度和黑暗之间的对比度称为动态范围，这非常难以重现。

随着数字摄影和摄像技术多年来突飞猛进，数字捕捉动态范围的能力大大提高。高动态范围（HDR）格式更进一步，允许您捕捉更宽的动态范围和更广的色域，创建更生动逼真的图像和视频。显示技术的并行突破使得展示此类图像成为可能，具有深沉的纯黑色、纯亮白色和介于两者之间的细腻层次。

WebKit 于 2020 年随 Safari 14.0 发布了对 HDR 视频的支持。现在，在适用于 iOS 26、iPadOS 26、macOS 26 和 visionOS 26 的 Safari 测试版中，WebKit 增加了对 Web 上 HDR 图像的支持。您可以将高动态范围图像嵌入网页，就像其他图像一样——包括 Canvas 中的图像。

Safari 26 测试版还增加了对 CSS 中新 dynamic-range-limit 属性的支持。此属性允许您控制在同时呈现标准动态范围 (SDR) 和 HDR 视频或图像时发生的情况。目前，Safari 测试版支持 no-limit 和 standard 值。使用 no-limit 告诉浏览器让内容保持原样——HDR 内容以 HDR 呈现。使用 standard 将所有 HDR 内容转换为 SDR，并在标准动态范围的限制内显示。这样做可以防止 HDR 图像和视频在 SDR 内容旁边显得过于明亮或格格不入，当用户或第三方提供内容时，这尤其有用。

SwiftUI 中的 WebKit

WebKit 有一个全新的 API，它从零开始设计，旨在与 Swift 和 SwiftUI 协同工作。这使得将 Web 内容集成到为 Apple 平台构建的应用程序中比以往任何时候都更容易。

A slide from the WWDC25 session on WebKit in SwiftUI with a collection of concepts from the session — Observable properties, Handle custom schemes, Designed for Swift UI, Customized navigations, Back / forward / list, HTML on a webpage, WebView, Custom dialogs, JavaScript…

这个新 API 的核心部分是新的 WebView 和 WebPage 类型。

WebView

要显示您的 Web 内容，只需使用新的 WebView 类型，这是一个全新的原生 SwiftUI 视图。您需要做的就是为其提供一个 URL 来显示。

struct ContentView: View {
    var body: some View {
        WebView(
            url: URL(string: "https://www.webkit.org")
        )
    }
}

WebView 还支持一套强大的新旧视图修饰符，例如 webViewScrollPosition、webViewMagnificationGestures、findNavigator 等。对于更高级的自定义，例如能够对内容变化做出反应，您需要将其连接到 WebPage。

WebPage

WebPage 是一个全新的可观察类，可用于加载、控制和与 Web 内容通信。您甚至可以完全独立使用它，在不需要直接向用户显示页面的情况下。但当您需要时，将其与 WebView 结合使用可以让您构建丰富的体验，并轻松地将 Web 集成到您的应用程序中。WebPage 拥有一整套可观察的属性和函数，可用于极其简单地响应变化，尤其是在 SwiftUI 中。

新的 URLSchemeHandler 协议使得实现自定义方案的处理变得超级简单，以便在您的应用程序中使用本地资源和文件。它利用了 Swift 和 Swift 并发功能的全部功能，您只需为其提供一个 AsyncSequence。

WebPage.NavigationDeciding 是一个新协议，允许您自定义导航策略在应用程序中导航的不同阶段应如何表现。除了 WebPage.NavigationDeciding，还有 WebPage.DialogPresenting 用于自定义如何显示从 JS 呈现的对话框。

struct ArticleView: View {
    @Environment(ArticleViewModel.self) private var model

    var body: some View {
        WebView(model.page)
            .navigationTitle(model.page.title)
    }
}

我们期待看到 Apple 开发者使用适用于 Swift 和 SwiftUI 的新 WebPage 和 WebView 类型创造出什么。作为一名 Web 开发者，您现在比以往任何时候都更容易利用您的技能为 iOS、iPadOS、macOS 和 visionOS 创建应用程序。

Screenshot of an iPad app, with a menu created in Swift, and content that is pulled from the web.

要了解有关新的 SwiftUI WebKit API 的更多信息，请观看 WWDC25 上的认识 SwiftUI 的 WebKit，并在 developer.apple.com 上的开发者文档中探索该 API。

visionOS 上的 <model>

现在在 visionOS 上，Safari 支持 <model> 元素。这是一个全新的 HTML 元素，类似于 img 或 video——只是现在您可以将交互式 3D 模型嵌入到网页中，并让用户通过一个属性与它们交互。如果他们想在自己的空间中以真实大小查看您的模型，他们可以通过一个手势将模型拖离页面。

基本用法

显示模型的语法很简单。使用与今天 AR 快速查看兼容的相同 USDZ 文件，您可以设置 model 元素的 src 属性。

<model src="teapot.usdz">
  <img src="fallback/teapot.jpg" alt="a teapot">
</model>

光照

光照是让您的 3D 内容看起来美观的重要部分，而模型元素也使其变得简单。您可以通过设置 environmentmap 属性，将任何图像（包括高动态范围 OpenEXR .exr 和 Radiance HDR .hdr 格式）作为环境贴图应用。

<model src="teapot.usdz" environmentmap="night.hdr">
  <img src="fallback/teapot-night.jpg" alt="a teapot at night">
</model>

动画和播放

您也可以处理包含动画内容的模型。使用 autoplay 属性声明性地设置模型动画在加载后立即运行，使用 loop 属性保持动画播放。

<model autoplay loop src="teapot-animated.usdz">
  <img src="fallback/teapot-animated.jpg" alt="a teapot with a stowaway!">
</model>

或者使用 JavaScript API 进行更精细的控制

const model = document.querySelector('model');
model.playbackRate = 0.5; //set 50% speed
model.currentTime = 6; //set the animation to 6 seconds in
model.play();

旋转和交互

要让用户自己旋转和翻转模型，请将模型的 stagemode 属性设置为 orbit，一切都将为您处理。

<model stagemode="orbit" src="teapot.usdz">
  <img src="fallback/teapot-orbit.jpg" alt="a teapot for examining">
</model>

或者，如果您追求程序化控制，模型可以使用其 entityTransform 属性进行缩放、旋转和移动（平移），该属性可以接受 DOMMatrix 值。您可以将其与 translate、rotate 和 scale3d 等函数组合，以您想要的方式定位模型。

<model id="rotating-teapot" src="teapot.usdz">
  <img src="fallback/teapot-rotater.jpg" alt="a teapot for turning">
</model>

使用此 JavaScript

const rotatingTeapot = document.getElementById("rotating-teapot");
await rotatingTeapot.ready;
function rotate() {
  rotatingTeapot.entityTransform = new DOMMatrix().rotate(0, performance.now()/10,0);
  requestAnimationFrame(rotate);
}
rotate();

关于模型元素及其功能，还有很多有待发现。请查看 模型元素示例和 MDN 的预期文档。

visionOS 上的沉浸式视频和音频

visionOS 中的 Safari 现在支持更广泛的沉浸式媒体，包括空间视频和 Apple 沉浸式视频，以及符合新 Apple 投影媒体配置文件 (APMP) 的 180°、360° 和广角 (FOV) 视频。将您的视频嵌入网页，并让用户在 3D 空间中的曲面上沉浸式播放。

A diagram of the five kinds of immersive media — Spatial, 180 degree, 360 degree, wide FOV (field of view), Apple Immersive

Safari 还支持所有这些沉浸式媒体类型的 HTTP Live Streaming。现有的 HLS 工具已更新以支持 APMP 分段，并且 HLS 规范已更新，其中包含如何在 HLS 清单文件中识别沉浸式媒体的信息。

通过观看 WWDC25 上的空间 Web 的新功能，了解更多关于 model 和沉浸式视频的信息。

WebGPU

Safari 26 测试版中的 WebKit 增加了对 WebGPU 的支持。

WebGPU 是一种用于在 GPU 上运行程序的 JavaScript API，其图形和渲染功能与 WebGL 类似。此外，它还增加了计算着色器，允许在 GPU 上进行通用计算，这是以前 WebGL 无法实现的。

WebGPU 在 macOS、iOS、iPadOS 和 visionOS 上取代了 WebGL，并被推荐用于新网站和 Web 应用。它与 Metal 和底层硬件的映射更好。相比之下，WebGL 由于源自 OpenGL（设计于现代 GPU 之前），需要大量的转换开销。

GPU 程序由网站或 Web 应用使用 WebGPU 着色语言（称为 WGSL，发音为 wig-sill）提供。这是一种新语言，可验证其对 Web 的安全性，不像某些现有着色语言允许未经检查的边界访问和指针算术。

WebGPU 已在 Safari 技术预览版中启用一年多，现在已在 macOS、iOS、iPadOS 和 visionOS 的 Safari 26 测试版中发布。考虑到 WebGPU 提供的硬件访问级别，我们进行了大量考虑，以确保 WebGPU 不会暴露新的安全攻击面。此外，最近优化了验证性能，以最大程度地减少开销并保持接近原生应用程序的性能。

作为开发者，您很可能会通过框架利用 WebGPU 的强大功能。目前，Babylon.js、Three.js、Unity、PlayCanvas、Transformers.js、ONNX Runtime 等在 Safari 26 测试版中均运行良好。

通过观看 WWDC25 上的使用 WebGPU 解锁 GPU 计算，了解更多信息。

CSS

锚点定位

锚点定位是一种用于在 Web 上将一个元素锚定到另一个元素的新布局机制。它与 popover 属性（在 Safari 17.0 中发布）完美配合，可以轻松创建响应式菜单、工具提示等。我们尤其为使锚点定位更直观的 position-area 语法感到自豪。当所需结果实际上非常简单时，它是使用如下语法的替代方案：

.thing-that-gets-anchored-to {
  anchor-name: --profile-button;
}

.item-that-pops-up {
  position-anchor: --profile-button;
  position: absolute;
  top: anchor(bottom);
  left: anchor(left);
 }

在上面，我们结合绝对定位的 top、left、bottom、right 使用 anchor() 函数。这种组合功能强大，当您的设计需要精确到像素的布局、锚定到多个锚点或动画锚点时，效果很好。但通常，您只是想告诉浏览器将项目放在哪里，并让它自行处理细节。您可以代替上面，使用如下代码：

.thing-that-gets-anchored-to {
  anchor-name: --profile-button;
}

.item-that-pops-up {
  position-anchor: --profile-button;
  position-area: bottom span-right;
}

position-area 语法来自我们提出的一个提案，当时我们思考开发者将如何使用锚点定位，以及许多 CSS 布局可能多么令人不知所措。

Code using Anchor Positioning with the results. Watch our WWDC25 session for a walkthrough of this example.
了解更多关于锚点定位的信息，并观看完整演练
WWDC25 Safari 和 WebKit 中的新功能中此示例的演示。

您还可以使用 position-try 使其具有响应性，如果空间不足以完全显示元素，则为其提供一个新的尝试位置（因此得名）。

目前，Safari 26 的第一个测试版不支持 position-visibility 或隐式 anchor 元素。在今年夏天的测试期间，我们期待您的反馈，以便在秋季发布前继续完善锚点定位。您可以在 bugs.webkit.org 提交问题。

滚动驱动动画

滚动驱动动画允许您将 CSS 动画与用户滚动了多远的里程碑，或与特定内容在视口中移进移出了多远的里程碑绑定。

例如，假设您想在项目滚动到视图中时对其进行动画处理。

Cards on a webpage, scrolled into the viewport, completing their animation (turning to land flat), as they reach 50%.

您可以声明希望动画与它们是否在视图中绑定，使用 animation-timeline: view()，并指定动画应在每个项目可见度达到 0% 时开始，并在它们穿越视口 50% 时结束，使用 animation-range: 0% 50%。

.item {
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: 0% 50%;
  &:nth-child(3n + 1) { animation-name: in-from-left; }
  &:nth-child(3n + 2) { animation-name: in-from-middle; }
  &:nth-child(3n + 3) { animation-name: in-from-right; }
}

观看 WWDC25 Safari 和 WebKit 中的新功能，查看此示例的完整演练，并了解滚动驱动动画的更多可能性。

美观的文本

Safari 26 测试版增加了对 text-wrap: pretty 的支持。我们对 pretty 的实现调整了文本换行方式，以使边缘更平整，改进连字符，并防止出现过短的末行。

Demo of the same text, only now with better rag. The "guides" show three vertical lines about 50 pixels apart — the far right edge is marked with a red line. 45 pixels in from the left is a vertical green line. And another 45 pixels left of that line is a vertical magenta line.

在 WebKit 中，元素中的所有文本行都通过 pretty 得到改进，而不仅仅是段落末尾的特定几行。要了解更多信息，请阅读使用 text-wrap pretty 改进排版。

对比色

Safari 26 测试版增加了对 contrast-color() 函数的支持。它允许您通过引用另一种颜色并要求浏览器选择黑色或白色（任何提供更高对比度的颜色）来定义颜色。

例如，我们可以创建一个背景色为 var(--button-color) 的按钮，然后要求浏览器将 color 设置为黑色或白色，以提供与该背景对比度更高者为准。

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

阅读如何在 CSS 中让浏览器选择对比色，了解更多关于 contrast-color() 的信息。

进度函数

Safari 测试版增加了对 CSS progress() 函数的支持。它是一个数学函数，返回一个数字值，表示某物在两个其他值之间 progressed 了多少，取得了多少进展。

progress(<progress-value>, <progress-start>, <progress-end>)

例如，假设您想知道一个盒子宽度与特定起始宽度和结束宽度相比的进度。

--percent-of-box-width: progress(100cqw, 300px, 600px);

假设在某个特定时刻，容器宽度为 450px。这正好是 300px 和 600px 之间的一半。progress() 函数将使用此公式计算出 50%：

(progress value - progress start value) / (progress end value - progress start value)

结果始终是一个没有单位的数字。请注意，您可以混合使用不同单位的长度。

请注意，目前 progress 不进行限制。因此它不会停在 0% 或 100%。它只会增长到 100% 以上，或缩小到 0% 以下。

progress() 函数在与其他复杂数学结合使用时功能最强大。结合动画、渐变或滚动时间轴，并将一组条件与另一组条件连接起来。未来可能还会有更多函数可以与它结合 加入 CSS。

更多 CSS 功能

diagrams of how margin-trim affects layout — before and after.

Safari 26 测试版现在支持 margin-trim: block inline 语法，用于在两个方向上进行修剪。在使用 margin-trim 简化布局中了解所有关于 margin-trim 以及 block inline 值的作用。

Safari 26 测试版增加了对 overflow-block 和 overflow-inline 的支持。它们是 overflow-x 和 overflow-y 的逻辑版本，使得编写支持多种语言的健壮代码更加容易。

现在 Safari 支持绝对定位中的自对齐属性 align-self 和 justify-self。

数字凭证 API

Safari 的 WebKit 增加了对 W3C 数字凭证 API 的支持。在已颁发此类凭证的司法管辖区，此 API 允许网站安全地向 Apple 钱包或其他已注册为身份文档提供商的 iOS 应用程序请求身份文档（例如，驾驶执照）。

数字凭证 API 对于在线访问服务需要高信任度凭证的情况非常有用（例如，租车）。它提供了一种更安全、更用户友好的替代方案，例如，用户无需拍摄驾驶执照的照片。

数字凭证 API 利用了现有的 凭证管理 API，并引入了一个“digital”成员来请求身份文档。请求身份文档依赖于 ISO/IEC 18013-7 附录 C 国际标准，该标准通过协议字符串 "org-iso-mdoc" 标识。

例如，要请求最终用户的驾驶执照，您可以这样做。在 HTML 中创建一个按钮：

<button onclick="verifyIdentity">Verify Identity</button>

然后在 JavaScript 中

async function verifyIdentity() {
    try {
        // Server generated and cryptography signed request data.
        const response = await fetch("drivers/license/data");
        const data = await response.json();

        // Create the request.
        const request = {
            protocol: "org-iso-mdoc",
            // What is being rquested, e.g. person's driving privileges 
            data,
        };

        // Perform presentment request.
        // Must be done through a user gesture!
        const credential = await navigator.credentials.get({
            mediation: "required",
            digital: {
                requests: [request],
            },
        });

        // Send credential to server for decryption.
        const response = await fetch("/decrypt", {
            method: "POST",
            body: JSON.stringify(credential.data),
            headers: {
                'Content-Type': 'application/json'
            }
        });

        // Display it...
        const json = await response.json();
        presentDetails(json);
    } catch (err) {
        // Deal with any errors...
    }
}

要了解更多关于这项变革性技术的信息，请观看 WWDC25 上的在 Web 上验证身份文档。并关注 问题 268516，了解更多关于 WKWebView 中数字凭证 API 的支持信息。

Web API

Web 开发者现在可以在 Safari 测试版中使用 Trusted Types API，以确保最终用户输入不会导致客户端跨站脚本 (XSS)。该 API 保证输入可以通过开发者指定的函数进行净化，然后传递给易受攻击的 API。

我们增加了对 URL 模式标准的支持，它提供了一种高效且高性能的方式，让 Web 开发者可以通过 URLPattern 对象使用正则表达式匹配 URL。例如，如果您的博客文章遵循 /blog/title-of-the-post 的模式，您可以按如下方式匹配它们：

const pattern = new URLPattern({ pathname: "/blog/:title" });
pattern.test("https://example.org/blog/wwdc25"); // true
pattern.test("https://example.org/about"); // false

Safari 将推出 WebAuthn Signal API，该 API 允许网站向凭证提供商报告凭证更新（如用户名更改或撤销），从而确保使用通行密钥获得更准确和一致的用户体验。新的 PublicKeyCredential.signal* 方法使网站能够传达这些更改，从而改进凭证管理并简化登录流程。此增强功能使网站能够提供更无缝和安全的 WebAuthn 体验。

现在还支持文件系统 WritableStream API，可以直接写入用户文件系统中的文件。此 API 提供了一种高效且简化的数据保存方式，允许开发者构建具有增强文件处理能力（如直接下载和原地文件编辑）的应用程序。

WebKit for Safari 26 测试版增加了对在 WebCrypto 中导入或导出基于 Edward 曲线的 JSON Web 密钥时 alg 参数的支持。

为了更精确的交叉检测，现已支持 IntersectionObserver 中的 scrollMargin。这允许您在根元素周围定义边距，类似于 rootMargin，从而对何时触发交叉事件提供更精细的控制。

JavaScript

Safari 26 测试版中的 WebKit 增加了对 JavaScript RegExp 对象中模式修饰符的支持。模式修饰符允许通过在正则表达式中添加和删除标志来更精细地控制正则表达式的行为。

显式资源管理提案中的几个功能现在也得到了支持

  • 用于对对象执行显式资源清理的 @@dispose 和 @@asyncDispose 方法
  • SuppressedError 构造函数
  • DisposableStack 构造函数

编辑

对于编辑功能，Safari 26 测试版增加了在滚动内容内部渲染原生选择 UI 的支持。

SVG

对于 SVG 容器，Safari 26 测试版增加了对 pointer-events="bounding-box" 的支持。

媒体

Safari 26 测试版还增加了 MediaRecorder 中对 ALAC 和 PCM 音频的支持。

const video = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(video, {
    mimeType: "audio/mp4; codecs=alac",
});

Safari 26 测试版通过添加 AudioEncoder 和 AudioDecoder 扩展了对 WebCodecs API 的支持。WebCodecs 允许开发者低级访问视频流的单个帧和音频块。这些新增功能使得编码 AudioData 对象和解码 EncodedAudioChunk 对象成为可能。

Safari 26 测试版现在包含了对 媒体源 API (MSE) 的多项改进。它增加了对 detachable MediaSource 对象的支持，允许在连接到媒体元素的各个对象之间无缝切换。并且它增加了对 MediaSource 偏好 DecompressionSession 的支持。

WebRTC

WebKit 为 WebRTC 带来了多项更新，增加了对以下功能的支持：

  • 为 RTCEncodedVideoStream 暴露 CSRC 信息
  • iOS 和 iPadOS 上的扬声器选择 API
  • RTCEncodedAudioFrame 和 RTCEncodedVideoFrame 的序列化
  • ImageCapture.grabFrame
  • RTcRtpScriptTransformer.generateKeyFrame 接受 rid 参数
  • RTCEncodedAudioFrame 和 RTCEncodedVideoFrame 构造函数

Web Inspector

要检查 Service Worker，您需要从 Safari 的“开发”菜单中打开 Web Inspector。这是因为 Service Worker 的执行上下文独立于安装它的页面。但是，Service Worker 处理的操作可能在您通过“开发”菜单访问它时已经发生。例如，在 Web 推送事件中，Service Worker 可能已经处理了传入的推送。

为了解决这个问题，Safari 26 测试版引入了 Service Worker 的自动检查和暂停功能。这类似于现有的 JSContext 自动检查和暂停功能。要使用它，请从“开发”菜单打开“检查应用程序和设备”工具。识别使用您要检查的 Service Worker 的应用程序或主屏幕 Web App，然后从三点菜单中选择“自动检查新的 Service Worker”选项。下次 Service Worker 在该应用程序中运行时，Web Inspector 窗口将自动为其打开。使用“自动暂停新的 Service Worker”选项，在 Service Worker 被检查后立即暂停其 JavaScript 执行。这允许您在操作被处理时设置断点并逐步执行代码。

Screenshot of the Apps and Devices Inspection window

Safari 26 测试版使得使用 Web Inspector 中的“时间线”选项卡调试与 Worker 相关的内存和性能问题变得更容易。断点、分析数据、事件、调用树和堆快照现在都正确地归因于每个 Worker 而不是其关联的页面。在 Worker 中运行的 JavaScript 代码还可以调用 debugger、console.profile 等，以用特定于应用程序的里程碑补充时间线数据。最后，现在可以导出和导入从时间线记录中收集的 Worker 数据。

Screenshot of Web Inspector Timelines tab, with all kinds of information about JavaScript events across time.

Web Inspector 中的元素节点树现在在已插入到自定义元素中相应 <slot> 节点的节点旁边显示一个标有插槽的徽章。单击该徽章可将节点树展开到自定义元素的 Shadow DOM 中并跳转到 <slot> 节点。如果存在对应关系，则 <slot> 节点旁边会有一个标有已分配的徽章。单击此徽章可跳转到此处插入的 light DOM 中的节点。

Screenshot of Web Inspector Elements tab.

Web Inspector 调试器已更新，为异步代码提供更直观的调试体验。您现在可以跳过 await 语句，就像它是同步的一样，这意味着调试器将跳过底层异步机制并移动到函数中的下一行代码。这简化了调试，因为它允许您专注于代码的预期逻辑，而不是 await 引入的可能令人困惑的执行路径。

Web 扩展

新的基于网络的 Safari Web 扩展打包工具允许开发者将其现有的 Web 扩展资源准备好，通过 TestFlight 在 Safari 中进行测试，并通过 App Store 进行分发。该工具可在 App Store Connect 中使用，并使用 Xcode Cloud 将您提供的扩展资源打包成一个签名的应用程序 + 扩展包，可在 macOS、iOS、iPadOS 和 visionOS 上的 Safari 中使用。在 developer.apple.com 上的文档中了解更多关于使用该工具的信息。

Web 扩展命令现在显示在 macOS 和 iPadOS 的菜单栏中。在 macOS 上，用户可以在 Safari 设置中自定义与命令关联的键盘快捷键。

WebKit API

WebKit API 的多项改进现已在 iOS、iPadOS、macOS 和 visionOS 测试版中提供。

  • 屏幕使用时间支持
  • WKWebView 的本地存储和会话存储恢复 API
  • 能够将 backdrop-filter 应用于透明 webview 后面的内容

WebAssembly

随着 WebAssembly 越来越受欢迎，WebKit 一直在全面提升 WebAssembly 的性能。现在，WebAssembly 首先由原地解释器进行评估，这使得大型 WebAssembly 代码运行得更快。

隐私

为了持续改进隐私和保护用户，Safari 测试版现在阻止已知的指纹识别脚本可靠地访问可能泄露设备特征的 Web API，例如屏幕尺寸、硬件并发、通过 SpeechSynthesis API 可用的声音列表、Apple Pay 支付能力、Web 音频回读、2D canvas 等。Safari 此外还阻止这些脚本设置长期存在的脚本写入存储，例如 cookie 或 LocalStorage。最后，Safari 阻止已知的指纹识别脚本读取可能用于导航跟踪的状态，例如查询参数和 document.referrer。

网络

WebKit 现在在 iOS、iPadOS 和 visionOS 上支持 <link rel=dns-prefetch>。它向浏览器提供提示，在后台执行 DNS 查找以提高性能。自 Safari 5 以来在 macOS 上受支持，现在其隐私性得到了改进。

锁定模式

“锁定模式”可在 iOS、iPadOS、watchOS 和 macOS 上使用，它是一种可选的极端保护措施，专为极少数可能因其身份或工作性质而成为最复杂数字威胁个人目标的个人而设计。这包括限制某些网站的功能，以确保最高级别的保护。

自推出以来，“锁定模式”一直禁止使用大多数网页字体。现在，网页字体将由新的安全字体解析器进行评估，如果通过评估，则允许使用。这意味着几乎所有内容在“锁定模式”下都将使用指定的网页字体显示。

网站兼容性

现在，在 macOS、iOS 和 iPadOS 上的 Safari 中，用户可以随时报告他们在网页上遇到的问题。

Safari on iPhone showing UI labeled "Report an issue" in the Page menu.

如果您遇到意想不到的问题，请首先尝试重新加载页面。如果问题仍然存在，请转到“页面”菜单，您会找到“报告网站问题...”选项。这会弹出一系列快速选择题，提供关键信息，帮助我们发现模式并更好地确保 Safari 中的出色体验。

错误修复及更多

除了所有这些新功能，WebKit for Safari 26 测试版还包含了对现有功能的许多修复。

辅助功能

  • 修复了导航链接上的 aria-expanded 属性支持。(141163086)
  • 修复了具有空 alt 属性的展示性图像被辅助技术忽略的问题，即使设置了额外的标签属性。(146429365)
  • 修复了 <figure> 元素内的 <figcaption> 元素仅当图像缺少其他标签方法（如 alt、ARIA 属性或 title 属性）时才有助于 <img> 元素的无障碍名称。(150597445)
  • 修复了 aria-setsize 和 aria-posinset 的无效值现在按照更新的 ARIA 规范处理，以确保正确的辅助功能 API 暴露和这些属性的可预测行为。(151113693)

CSS

  • 修复了与 <img usemap="..."> 元素结合使用的 <area> 元素上不显示 cursor: pointer 的问题。(74483873)
  • 修复了带有内联尺寸限制和自动调整列的网格大小不正确的问题。(108897961)
  • 修复了使用 content-visibility: auto 跳过的内容现在可以被找到。(141237620)
  • 修复了使用 text-wrap: balance 时在行尾换行 SVG 的问题。(141532036)
  • 修复了 @font-face font-family 描述符不允许值列表的问题。(142009630)
  • 修复了当没有盒子时，具有绝对定位的浮动计算值为 none 的问题。(144045558)
  • 修复了按钮默认不具有 align-items: flex-start 的问题。(146615626)
  • 修复了 @scope 创建样式嵌套上下文的问题。(148101373)
  • 修复了将 content-visibility 从 visible 更改为 hidden 时重新绘制不正确的问题。(148273903)
  • 修复了浮动框、选择和插入符号在跳过的子树内绘制不正确的问题。(148741142)
  • 修复了流外定位框在跳过子树内部 getBoundingClientRect() 不正确的问题。(148770252)
  • 修复了 <pre> 和其他元素在用户代理样式表中遵循逻辑边距的问题。(149212392)

Canvas

  • 修复了当父元素调整大小时，重新绘制具有相对宽度的画布的问题。(121996660)
  • 修复了 iOS 模拟器中的 getContext('2d', { colorSpace: 'display-p3' })。(151188818)

DOM

  • 修复了 HTML 中 CDATASection 节点的序列化问题。(150739105)

编辑

  • 修复了在溢出滚动容器中选择 UI 被剪裁的问题。(9906345)
  • 修复了由于绝对定位元素之间的 <br> 元素导致的选择问题。(123637358)
  • 修复了在自动或键盘滚动期间选择未能更新的问题。(144581646)

表单

  • 修复了当使用 setValidity 时，表单关联的 ElementInternals 总是报告 customError 的问题。(115681066)
  • 修复了 ElementInternals 的 setValidity 处理缺少可选 anchor 参数的问题。(123744294)
  • 修复了程序化分配的 File 对象在 <input> 元素中显示正确文件名的问题，即使没有文件路径。(152048377)
  • 修复了 <select> 元素内的标签通过使用标准属性匹配而不是怪癖模式处理，使其行为与其它浏览器保持一致。(152151133)

JavaScript

  • 修复了当数组被冻结时，Array.prototype.pop 会抛出异常的问题。(141805240)
  • 修复了 Math.hypot() 性能显著低于 Math.sqrt() 的问题。(141821484)
  • 修复了 Array#indexOf 和 Array#includes 将 +0 和 -0 视为相同值的问题。(148472519)
  • 修复了迭代器助手在早期错误时错误关闭迭代器的问题。(148774612)
  • 修复了 Iterator.prototype.reduce 在初始参数为 undefined 时失败的问题。(149470140)
  • 修复了非严格模式下 f() = 1 与其他引擎的行为。(149831750)
  • 修复了嵌套的否定类导致不正确匹配的问题。(151000852)

媒体

  • 修复了当视频元素被移除时，画中画会退出的问题。(123869436)
  • 修复了带有 B 帧的 MP4 寻址，通过抑制寻址点之后具有更早呈现时间戳的帧，防止乱序帧显示。(140415210)
  • 修复了 iPadOS 上的媒体元素支持 Web 开发者更改音量，类似于 macOS 和 visionOS。:volume-locked 伪类可以继续用于功能检测。(141555604)
  • 修复了寻址或拖动不总是寻址到请求时间的问题。(142275903)
  • 修复了通过 AudioContext 播放声音时，寻址后音频缓冲数据过时的问题。(146057507)
  • 修复了没有 srclang 的字幕轨道以正确标签显示的问题。(147722563)
  • 修复了 MediaSession 处理带有子资源的 SVG 图标的问题。(150665852)
  • 修复了 MediaCapabilitiesDecodingInfo.configuration 即使在 .supported 为 false 时也能正确填充的问题。(150680756)

渲染

  • 修复了一个问题，允许滚动容器中的图像在接近视口时加载，而不是在与视口相交时加载。(118706766)
  • 修复了垂直 flexbox 布局中拉伸图像消失的问题。(135897530)
  • 修复了 CSS 渐变插值到第一个或最后一个色标之外的区域的问题。(142738948)
  • 修复了 align-self 和 justify-self 的 position-area 和 self-alignment 属性的集成问题。(145889235)
  • 修复了 will-change: view-transition-name 创建堆叠上下文和背景根的问题。(146281670)
  • 修复了 will-change: offset-path 创建堆叠上下文和包含块的问题。(146292698)
  • 修复了 <datalist> 下拉菜单不显示选项标签的问题。(146921617)
  • 修复了文本指示器有时在弹跳动画期间被剪裁的问题。(147602900)
  • 修复了 content-visibility: hidden 子树中的几何值。(148553259)
  • 修复了在目标为 content-visibility: auto 时未将 content-visibility: hidden 内容标记为布局的问题。(148663896)
  • 修复了 sideways-lr 中 ruby 注释定位不正确的问题。(148713073)
  • 修复：阻止命中测试跳过子树中的内容。(148741508)
  • 修复了 feMerge 在多次合并相同的 feMergeNode 时 HTML 元素位置不正确的问题。(149431216)
  • 修复了在固有宽度计算期间确定何时使用弹性项目进行百分比解析的问题。(149615295)
  • 修复了一个问题，即如果发生视图转换，<canvas> 元素会消失一帧。(149709642)
  • 修复了由于剪裁子元素的坐标空间计算不正确而导致转换后 <audio> 控件不可见的问题。(150526971)
  • 修复了 display: flex 的 <input type=button> 元素居中对齐文本的问题。(151148821)
  • 修复了即使文本与调整大小控件重叠也显示调整大小光标的问题。(151309503)

SVG

  • 修复了 SVG 绘图服务器对不存在的 URL 的回退处理问题。(144493507)
  • 修复了在绘制 SVG 时尊重 CSS image-rendering 属性的问题。(144507619)
  • 修复了 url(...) none 的处理以匹配 SVG 绘图服务器规范。(146454258)
  • 修复了“禁用”的 <foreignObject> 和 <image> 的祖先边界框问题。(147455573)
  • 修复：改进了对带有子资源的 SVG 图像的处理。(148607855)

Safari View Controller

  • 修复了 SFSafariViewController 中 lvh 和 vh 视口单位相对于小视口尺寸不正确的问题。(108380836)

滚动

  • 修复了使用手势或鼠标选择时，自动滚动期间选择不更新的问题。(144744443)
  • 修复了在选择文本时平滑滚动的自动滚动问题。(144900491)

Service Workers

  • 修复了 Service Worker 中 ReadableStream 取消方法未能可靠调用问题。(144297119)
  • 修复了一个问题，即导航预加载响应在从磁盘缓存提供时错误地保留了重定向标志，导致加载期间的安全检查失败。(144571433)

表格

  • 修复了只有当 inline-size 不是 auto 时才触发表格布局的问题。(147636653)

文本

  • 修复了围绕包含换行符的文本生成滚动到文本片段的问题。(137109344)
  • 修复了当选定文本在不同块中开始和结束时生成文本片段的问题。(137761701)
  • 修复了粗体合成效果减弱的问题。(138047199)
  • 修复了当选择的文本是其自身的块且该文本存在于文档更上方时，“复制链接到高亮”不起作用的问题。(144392379)
  • 修复了在空格处开始或结束的选择不创建文本片段的问题。(145614181)
  • 修复了 <b> 和 <strong> 使用 font-weight: bolder 以匹配 Web 规范的问题。(146458131)

URL

  • 修复了 URL 主机和主机名设置器正确处理 @ 的问题。(146886347)

Web API

  • 修复：URL 的协议设置器应禁止非特殊方案切换到特殊方案。(82549495)
  • 修复了事件分派由全屏渲染更新步骤完成的问题。(103209495)
  • 修复了过度宽泛的全屏退出触发器，将其限制为仅文本输入元素获得焦点，从而防止非文本输入类型导致意外的全屏退出。(136726993)
  • 修复了没有帧的下载源的 WKDownload.originatingFrame 问题。(145328556)
  • 修复了全屏使用单个队列进行事件分派的问题。(145372389)
  • 修复了 ProgressEvent 成员 loaded 和 total 根据最近的规范更改使用 double 类型的问题。(146356214)
  • 修复了通过 <embed> 嵌入的 SVG 的固有尺寸在导航时失效的问题。(147198632)
  • 修复了语音合成被取消时，待处理的语音事件不会收到错误事件的问题。(148731039)
  • 修复了序列化 HTML 属性值时转义 < 和 > 的问题。(150520333)
  • 修复了仅在安全上下文内提供 SpeechRecognition 接口的问题。(151240414)
  • 修复了选项元素不裁剪标签值并正确处理空标签的问题。(151309514)

Web 动画

  • 修复了使用 requestAnimationFrame 的页面上的 CSS 滚动驱动动画在导航离开并返回页面后无法正确动画的问题。(141528296)
  • 修复了在应用加速操作时按需计算时间偏移的问题。(142604875)

Web 扩展

  • 修复了阻止重定向到扩展资源的 declarativeNetRequest 错误。(145569361)
  • 修复了转换 declarativeNetRequest 规则，使较高的数字被视为较高的优先级。(145570245)
  • 修复了导致 wasm-unsafe-eval 未被解析为有效 CSP 关键字的问题。(147551225)
  • 修复了如果所有 URL 和/或主机匹配模式已获得授权，permissions.getAll() 返回正确来源的问题。(147872012)

Web Inspector

  • 修复了美化打印 CSS，避免在通用选择器 () 后跟伪类或伪元素时添加空格，防止对 CSS 选择器行为造成意外更改。(71544976) 修复了在时间线选项卡中为每个目标显示单独的概述。(146356054)
  • 修复了黑盒处理大量源映射时的性能问题。(148116377)
  • 修复了调试器跳过 await 语句，就像它是同步代码一样。(149133320)
  • 修复了异步解析源映射，从而使大型源映射不会阻塞渲染。(151269154)
  • 修复了“时间线”选项卡中一致显示 JavaScript 和事件目标的分层路径，以防止处理多个目标时混淆。(152357197)

WebRTC

  • 修复了第一次从扬声器切换到接收器不工作，而只在第二次才工作的问题。(141685006)
  • 修复了当权限被拒绝时，enumerateDevices 仍然返回设备可用的问题。(147313922)
  • 修复了 enumerateDevices 不检查设备权限的问题。(148094614)
  • 修复了 WebRTC 编码转换到 RTC 编码帧数组缓冲区的问题。(148343876)
  • 修复了 RTC 编码帧时间戳应持久化的问题。(148580865)
  • 修复了当麦克风的音频单元更改其回声消除模式时触发 configurationchange 事件的问题，确保网页收到此类更改的通知以相应地更新轨道设置。(150770940)

试用 Safari 26 测试版

您可以通过安装 macOS Tahoe 26、iOS 26、iPadOS 26 或 visionOS 26 的测试版来测试 Safari 26 测试版。或者，如果您愿意，一旦可用，可以通过下载 Safari 26 测试版，在 macOS Sequoia 或 macOS Sonoma 上试用 Safari 26 测试版。（使用免费的 Apple ID 登录即可下载。在 macOS Sequoia 或 macOS Sonoma 上安装 Safari 26 测试版将替换您现有的 Safari 版本，且无法恢复到早期版本。）

您还可以在 macOS 上的 Safari 技术预览版中帮助测试其中许多功能。

反馈

我们很高兴听到您的意见。要分享您的想法，请在网上找到我们的 Web 布道者：Jen Simmons 在 Bluesky / Mastodon，Saron Yitbarek 在 BlueSky，Jon Davis 在 Bluesky / Mastodon。您可以在 LinkedIn 上关注 WebKit。如果您遇到任何问题，欢迎您就 Safari UI 提供反馈（了解更多关于提交反馈的信息），或就 Web 技术或 Web Inspector 提交 WebKit 错误报告。如果您遇到无法正常工作的网站，请在 webcompat.com 提交报告。提交问题确实有所帮助。

您也可以在Safari 发布说明中找到此信息。