WWDC24 最新消息
Safari 18 测试版中的 WebKit

目录

• WebXR
• CSS
• 适用于 Mac 的网络应用
• Safari 扩展
• 空间媒体
• HTML
• 媒体
• WebRTC
• 通行密钥
• HTTPS
• JavaScript
• Web API
• Canvas
• WebGL
• 网页检查器
• WKWebView
• Apple Pay
• 弃用功能
• 错误修复及更多
• 帮助我们测试 Beta 版
• 反馈

过去一年对 WebKit 来说是丰收的一年。在 WWDC23 上发布 Safari 17 测试版之后，我们已经发布了 Safari 17.x 的六个版本，共包含了 200 项新的网页技术。我们还一直在努力进行多个架构改进项目，以期长期增强 WebKit 的实力。

现在，我们很高兴地宣布推出适用于 Safari 18 测试版的 WebKit。它新增了 48 项网页平台功能，以及 18 项弃用和 174 项错误修复。即刻在 iOS 18 测试版、iPadOS 18 测试版、visionOS 2 测试版和 macOS Sequoia 测试版上进行测试。

WebXR

Safari 18 for visionOS 2 beta 新增了对沉浸式 WebXR 的支持。现在，您可以使用 Apple Vision Pro 为用户在网络上创建并提供完全沉浸式的体验。Safari on visionOS 2 beta 支持 immersive-vr 会话。WebXR 场景使用由 WebGL 驱动的硬件加速图形显示。

Safari for visionOS 2 beta 支持新的 WebXR transient-pointer 输入模式。它使您能够充分利用 visionOS 上的自然输入，并允许用户通过注视和捏合进行交互。

如果您想对用户手的 3D 模型进行动画处理，Safari for visionOS 2 beta 还支持 WebXR 手部跟踪。为确保隐私，在 WebXR 会话开始时将向用户请求允许手部跟踪的权限。

通过观看 WWDC24 上的使用 WebXR 构建沉浸式网页体验来了解 visionOS 2 beta 上的 WebXR，该视频将于 6 月 12 日星期三上线。并通过阅读在 Apple Vision Pro 中引入 WebXR 自然输入，了解更多关于 transient-pointer 输入模式的信息。

CSS

视图过渡

WebKit 在 Safari 18 测试版中新增了对视图过渡 API 的支持。它提供了一个优化的浏览器 API，用于将元素从一个状态动画过渡到另一个状态。Safari 支持 CSS 视图过渡模块级别 1 规范，该规范新增了用于定义过渡动画的 CSS 属性和伪元素，以及一个新的浏览器 API，用于启动过渡动画并对不同的过渡状态做出反应。它的工作原理是捕获页面的当前（旧）状态，并对新状态应用动画过渡。默认情况下，浏览器会在状态之间应用交叉淡入淡出效果。

调用 document.startViewTransition() 方法来启动捕获。您可以将回调函数作为第一个参数传递，以在旧捕获和新捕获之间进行 DOM 状态更改。该方法返回一个 ViewTransition 对象，其中包含可用于跟踪视图过渡何时开始或结束的 Promise。

捕获状态后，会构建一个伪元素树，可以使用 CSS 对其进行定位，从而允许您修改用于过渡的 CSS 动画。可以通过 ::view-transition-new(*) 和 ::view-transition-old(*) 选择器修改从旧页面状态到新页面状态的动画。您还可以通过使用 CSS view-transition-name 属性命名特定元素，要求浏览器独立跟踪其状态更改。然后，您可以使用伪元素来自定义其动画。

.page-view {
    view-transition-name: page-view;
}
::view-transition-old(page-view) {
    animation: 500ms ease-in-out transition-out-animation;
}
::view-transition-new(page-view) {
    animation: 500ms ease-in-out transition-in-animation;
}

以下示例演示了使用选项卡式导航进行的状态管理。每个选项卡视图都有一个自定义的退出过渡动画和一个细微不同的进入动画，而选项卡本身则依赖于默认页面过渡。

样式查询

Safari 18 测试版中的 WebKit 新增了对测试 CSS 自定义属性时的样式查询的支持。与开发者使用 Sass mixins 的方式类似，样式查询可用于定义一组可重复使用的样式，并将其作为一组应用。

在这里，如果 --background 自定义属性设置为黑色，则将应用某些样式——在这种情况下，使标题和段落文本颜色变为白色。

@container style(--background: black) {
  h2, h3, p {
    color: white;
  }
}

请注意 HTML 结构。默认情况下，样式查询引用直接父元素上的样式。您可以通过使用容器查询名称来创建不同的引用。

相对颜色语法中的 currentcolor 和系统颜色关键词

相对颜色语法的支持已在 Safari 16.4 中发布。它允许您以更动态的方式定义颜色，从现有颜色创建新颜色。例如，值 lch(from var(--color) calc(L / 2) C H) 使用 lch 颜色空间来获取变量 --color 并计算一个亮度减半的新颜色，即 calc(L / 2)。

现在，从 Safari 18 测试版的 WebKit 开始，您可以在定义新颜色时引用 currentcolor 或 系统颜色关键词。例如，此代码将背景颜色设置为与文本颜色相同，但在 oklch 颜色空间中计算后，亮度将是其 4 倍。

section { background: oklch(from currentcolor calc(L * 4) C H); }

能够引用 系统颜色关键词 开启了另一个选择的世界。系统颜色就像变量一样，代表由操作系统、浏览器或用户建立的默认颜色——这些默认颜色会根据系统是设置为浅色模式、深色模式、高对比度模式等而变化。例如，canvas 代表 HTML 页面的当前默认背景颜色，而 fieldtext 则与表单字段内部文本的颜色匹配。在 CSS Color level 4 中查找完整的系统颜色列表。

相对颜色语法允许您在 CSS 中定义颜色之间的动态连接，从而减少了在严格规范的设计系统中通过变量控制颜色的需求。通过观看 WWDC23 上CSS 新功能的这部分内容，了解更多关于相对颜色语法的信息。

动画化 display 属性

Safari 18 测试版中的 WebKit 新增了对 display 属性过渡动画的支持。

许多开发者都对使用 @starting-style 以及 transition-behavior 和 display: none 插值感到兴奋。WebKit for Safari 17.4 新增了对 transition-behavior 的通用支持，包括 transition-behavior: allow-discrete。WebKit for Safari 17.5 新增了对 @starting-style 的支持，允许您为元素创建（或重新创建）时的过渡定义起始值。现在，在 Safari 18 测试版中的 WebKit 中，您可以将这些功能结合使用，以对 display 属性进行过渡。

在 visionOS 上塑造交互区域

作为一名网页开发者，您非常熟悉网页上的链接样式工作原理。几十年来，您一直能够使用 CSS 为 :link、:hover、:active 和 :visited 状态设置 text-decoration、color 等样式。您还可以通过使用填充来调整不可见点击目标的大小。

Apple Vision Pro 为链接的工作方式增添了新的维度——在 visionOS 上，轻点目标是可见的。每当用户注视一个交互元素时，它都会被高亮显示，告知用户可以轻点它。作为设计师或开发者，您可以有意地设计交互区域的外观。例如，您可能希望为原本不可见的框添加填充，甚至是圆角。

现在，在 visionOS 2 beta 版 Safari 中，当您使用 CSS clip-path 更改链接可轻点区域的形状时，可见的交互区域也会随之改变形状。使用 SVG 构建的交互式 UI 元素也将以正确的形状高亮显示。通过观看 WWDC24 上的优化空间网页体验来了解更多信息，该视频将于 6 月 11 日星期二上线。

背景滤镜

最初在 Safari 9.0 中推出，背景滤镜 提供了一种将图形效果应用于特定元素背后内容的方法。例如，您可以将 backdrop-filter 应用于标题，标题背后的所有内容都将变得模糊、饱和度降低或对比度增加。可以使用 SVG 中的任何滤镜函数——blur()（模糊）、brightness()（亮度）、contrast()（对比度）、drop-shadow()（阴影）、grayscale()（灰度）、hue-rotate()（色相旋转）、invert()（反相）、opacity()（不透明度）、saturate()（饱和度）和 sepia()（褐色）。

多年来，背景滤镜仅在 Safari 中有效。当您使用 -webkit-backdrop-filter 前缀属性时，它才可用。现在，从 Safari 18 测试版开始，您不再需要该前缀。我们还改进了实现，修复了错误并增强了互操作性。

此演示展示了八种不同的滤镜，以及单独使用每种滤镜可能实现的效果。当然，您可以组合滤镜以创建更有趣的结果。鉴于背景滤镜自 2015 年起在 Safari 中受到支持，自 2018 年起在 Edge 中，自 2019 年起在 Chrome 中，自 2020 年起在 Samsung Internet 中，以及自 2022 年起在 Firefox 中受到支持，现在是考虑其所带来的图形设计可能性的绝佳时机。

Flexbox 中的 safe 关键词

Safari 18 测试版中的 WebKit 新增了对 Flexbox 中对齐的 safe 关键词的支持。这提供了一种机制，用于微调弹性项目如何溢出。让我们看一个简单导航菜单的示例——Flexbox 的经典用法。

<nav aria-label="main"><ul>
  <li><a href="/us">U.S.</a></li>
  <li><a href="/business">Business</a></li>
  <li><a href="/investigations">Investigations</a></li>
  <li><a href="/style">Style</a></li>
  <li><a href="/tech">Tech</a></li>
  <li><a href="/world">World</a></li>
</ul></nav>

以下 CSS 创建了一个简单布局，当一行菜单空间不足时，它会换行，同时在可用空间中居中显示项目。

header nav {
  display: flex;
  flex-flow: wrap;
  gap: 1.5rem;
  justify-content: center; /* centers the items in the available space */
}

默认情况下，justify-content: center 将始终使项目居中，即使内容溢出包含框。但是，您可能更喜欢内容在溢出时不要居中——居中会截断单词的开头和结尾，这使得在溢出不可见时内容更难理解。

safe 关键词允许您更改内容溢出时对齐的工作方式。justify-content: safe center 规则将改为从开始位置对齐任何溢出的项目，同时继续居中显示未溢出的项目。

如果您想覆盖 safe 关键词，可以使用 unsafe。justify-content: unsafe center 规则将与 justify-content: center 的作用相同。unsafe 关键词在 Safari 的 WebKit 中已经支持了相当长一段时间。

内容可见性

Safari 18 测试版中的 WebKit 新增了对 content-visibility 的支持。此属性控制元素是否以有助于性能优化的方式渲染其内容。它允许您告知浏览器页面的某些部分很可能最初在屏幕外，并建议将其从布局和渲染中省略。这可以加快页面加载速度。

适用于 Mac 的网络应用

去年，我们在 macOS Sonoma 中新增了对网络应用的支持。您可以将任何网站添加到 Dock 中——无论它是否使用 Manifest 文件、Service Worker 或其他技术来定制网络应用体验。在 Safari 中访问该网站，然后前往“文件”>“添加到 Dock…”菜单，您可以在其中自定义图标、更改名称，甚至清理 URL。然后，只需点击 Dock 中的网络应用图标，它就会作为应用打开。

今年为 Mac 上的网络应用带来了两项改进。

打开链接

macOS Sequoia 测试版新增了对直接在网络应用中打开链接的支持。现在，当用户点击链接时，如果该链接与用户已添加到其 Dock 的网络应用的 scope 匹配，则该链接将在该网络应用中打开，而不是在其默认网页浏览器中打开。

例如，假设您已将 MDN Web Docs 添加到 Dock。然后，同事通过信息、邮件、Slack、Discord、IRC 或 Mac 上的任何非浏览器应用程序向您发送一个 MDN 页面的链接。现在，当您点击该链接时，它将在 MDN Web Docs 网络应用中打开，而不是在您的默认浏览器中打开。

在浏览器内点击链接将保持当前行为。此功能仅影响在其他地方打开的链接。（当用户在 Safari 中时，点击与已添加到 Dock 的网络应用的 scope 匹配的链接时，他们将看到一个“在网络应用中打开”的横幅，除非他们之前已关闭该横幅。）

默认情况下，当链接与用于创建网络应用的网页主机匹配时，此行为适用。作为开发者，您可以通过在网络应用清单中使用 scope 成员定义应在网络应用中打开的 URL 范围来优化此体验。

扩展支持

现在，您可以使用 Safari 网络扩展和内容拦截器来个性化 Mac 上的网络应用。前往网络应用的“设置”菜单，即可访问所有已安装的内容拦截器和网络扩展。在 Safari 中启用的任何扩展都将在网络应用中默认开启。每个网络应用都可以进行独特定制，就像 Safari 个人资料一样。

Safari 扩展

Safari 18 测试版还新增了对移动设备管理扩展启用状态、私人浏览状态和受管设备网站访问的支持。这意味着管理 iOS、iPadOS 或 macOS 设备的学校和企业现在可以在其管理中包含 Safari 应用扩展、内容拦截器和网络扩展的配置。

空间媒体

在 Apple Vision Pro 上，您可以拥有令人惊叹的体验之一就是查看空间照片和全景照片。当您在 visionOS 中打开“照片”应用时，您会看到一个照片蒙太奇。轻点一张图像，它会单独出现在您面前的一个浮动框架中，而应用的其余部分则会消失。

空间照片以恰到好处的高度和视角出现，让您感觉仿佛回到了某个时刻。再次轻点用户界面，照片就会脱离框架，放大并变得更具沉浸感。同样，全景照片在第一次轻点时会浮动在一个框架中。然后，在第二次轻点用户界面时，它会展开并环绕在您周围，创造出完全沉浸式的体验。

现在，在 visionOS 2 测试版 Safari 18 中，您可以使用全屏 API 在网页上创建相同的体验。您可以将照片嵌入网页中，并提供轻点功能。照片将弹出到一个浮动框架中，同时 Safari 窗口消失。然后，当用户轻点 visionOS 提供的空间照片或全景照片 UI 时，照片将进一步扩展以创建完全沉浸式体验。当他们退出图像时，Safari 窗口将返回。

让我们来看看如何使用全屏 API 在网页上支持空间照片或全景照片体验。首先，使用我们多年来在网络上使用的任何技术将图像包含在您的网页中。在这里，我们可以使用简单的 HTML 将一张扁平的全景照片嵌入到网页中。

<img src="panorama.jpeg" class="go-fullscreen" alt="[description]">

然后，使用 JavaScript，我们将在轻点时触发 .requestFullscreen()。或许像这样。

document.querySelectorAll('.go-fullscreen').forEach(element => {
    element.addEventListener('click', async () => {
        await element.requestFullscreen();
    });
});

当然，您可以为用户创建自己的轻点 UI，而不是将整个照片作为轻点目标。

空间图像的工作方式完全相同，尽管我们可能希望为不支持 HEIC 文件的浏览器提供备用方案。我们可以使用 picture 元素来实现这一点。

<picture>
    <source srcset="spatial.heic" type="image/heic">
    <source srcset="fallback.avif" type="image/avif">
    <img src="fallback.jpg" class="go-fullscreen" alt="[description]" >
</picture>

空间图像是立体图像，具有左右两个通道。在 Safari 中，当图像嵌入网页时，浏览器将显示左通道。而且无需担心为 macOS、iOS 或 iPadOS 上的 Safari 提供任何形式的备用方案——立体 HEIC 文件运行良好。

此技术还将使支持全屏 API 的任何浏览器中的图像全屏显示。通过观看 WWDC24 上的优化空间网页体验，了解更多关于将全景和空间照片添加到您的网站的信息，该视频将于 6 月 11 日星期二上线。

HTML

写作建议

在去年的 WWDC 上，Apple 发布了 iOS、iPadOS、macOS 等系统上的内联预测文本功能。它通过预测用户可能正在输入的内容，并在用户轻点空格键时完成单词、短语甚至整个句子，从而帮助用户更快地输入文本。现在，适用于 iOS、iPadOS、visionOS、macOS Sequoia 和 macOS Sonoma 的 Safari 18 测试版中的 WebKit 将内联预测文本功能带到了网页端。

虽然内联预测文本可以带来出色且个性化的用户体验，但在网页上，有些特定情况可能更适合不启用预测功能。Safari 18 测试版中的 WebKit 在 iOS、iPadOS、visionOS、macOS Sequoia 和 macOS Sonoma 上，通过 writingsuggestions 属性，为网页开发者提供了禁用内联预测的机会。默认情况下，写作建议设置为 true。您可以通过在任何类型的文本输入字段中包含 writingsuggestions="false" 属性来关闭此功能。

开关

适用于 iOS 18 测试版 Safari 的 WebKit 新增了对 <input type=checkbox switch> 的触觉反馈支持。这意味着，现在当用户在 iPhone 上轻点开关控件时，会感觉到一次轻点——就像在 iOS 的“设置”应用中切换开关的感觉一样。尝试此演示以体验一下。

日期和时间输入

Safari 18 测试版中的 WebKit 在 macOS 上改进了对日期和时间输入字段类型的辅助功能支持。现在 <input type="date">、<input type="datetime-local"> 和 <input type="time"> 元素可以与 VoiceOver 正常配合使用。

ARIA

通常元素都具有所需的标签，但有时某个特定按钮或 UI 没有文本标签。在这种情况下，可以使用 ARIA 提供可访问的标签。aria-label 属性提供标签名称，而 aria-roledescription 提供元素的角色描述。

在极少数情况下，您可能需要覆盖 aria-label 或 aria-roledescription，以专门为盲文提供不同的名称或描述。aria-braillelabel 和 aria-brailleroledescription 属性提供了这种能力。它们旨在解决非常具体的需要，包括网站需要渲染特定盲文点字模式的教育情境。如果您确实使用了与盲文相关的 ARIA 属性，请务必使用盲文阅读器进行测试。如有疑问，依赖内容或 aria-label / aria-roledescription 中的可访问名称几乎总是更好的用户体验。WebKit 多年来一直支持这些 ARIA 属性。

现在，Safari 18 测试版中的 WebKit 新增了对 ariaBrailleLabel 和 ariaBrailleRoleDescription 元素反射属性的支持。这使得可以直接通过 JavaScript API 获取和设置 DOM 元素上的 aria-braillelabel 和 aria-brailleroledescription ARIA 属性，而无需使用 setAttribute 和 getAttribute。

媒体

在 macOS 版 Safari 18 测试版中的 Viewer 中，您可以无干扰地观看视频。

当您在 Viewer 中播放时，视频会填满 Safari 窗口，同时提供对系统播放控件的完全访问权限。然后，无论何时您切换标签页、关闭窗口或用另一个窗口遮挡网页，它都会自动进入画中画模式。在 Safari 中，只要您处于包含显著视频元素的网页上，即可在新页面菜单中查找“视频查看器”。

visionOS 上的视频

适用于 visionOS 2 测试版的 Safari 新增了将全屏视频固定到当前环境的支持。当用户全屏观看视频时，他们可以轻点 进入完全沉浸式体验。旋转数码表冠可调整沉浸感。视频发出的光线将反射到环境中，同时音频将在一个大型音场中渲染。

受管媒体源

Safari 18 测试版中的 WebKit 新增了对受管媒体源 (MMS) 和媒体源扩展 (MSE) 的 Workers 支持。这在复杂的网站上特别有用，即使其他网站活动（例如实时评论）导致主线程非常繁忙，也能确保连续流畅的视频播放。您可以在此演示中看到性能差异。

WebRTC

Safari 18 测试版中的 WebKit 新增了对 WebRTC HEVC RFC 7789 RTP 有效载荷格式的支持。此前，WebRTC HEVC 使用通用分包而非 RFC 7789 分包。这种有效载荷格式为改进视频会议、视频流媒体以及传输高比特率电影和电视节目提供了新选项。

Safari 18 测试版中的 WebKit 新增了对专用 worker 中 MediaStreamTrack 处理的支持。它还新增了对缺失的 WebRTC 统计数据的支持。

通行密钥

两年前在 WWDC22 上，我们宣布支持通行密钥——一种突破性的行业标准登录网站和应用服务的方式。通行密钥为人们提供了极其简单的用户体验，同时显着提升了安全性。要了解更多信息，请观看认识通行密钥或阅读支持通行密钥。

Safari 18 测试版中的 WebKit 新增了对三项新功能的支持，以持续改进通行密钥。首先，Safari 18 测试版新增了对使用 mediation=conditional 进行网页认证凭证创建的支持。这允许网站自动将现有的基于密码的账户升级为使用通行密钥。通过观看 WWDC24 上的通过通行密钥升级和凭证管理器简化登录，了解更多信息，该视频将于 6 月 11 日星期二上线。

其次，Safari 18 测试版中的 WebKit 新增了对跨相关来源使用通行密钥的支持。这允许网站在共享凭证后端的有限域范围内使用相同的通行密钥。

第三，Safari 18 测试版中的 WebKit 新增了对 WebAuthn prf 扩展的支持。它允许从通行密钥中检索对称密钥，用于加密用户数据。

HTTPS

Safari 18 测试版中的 WebKit 新增了对所有图像、视频和音频的安全 HTTPS 支持，通过在混合内容设置中升级被动子资源请求来实现。这意味着，如果网站的某些文件通过 HTTPS 提供，而另一些文件通过 HTTP 提供（称为“混合内容”），现在所有图像和媒体都将自动升级到 HTTPS，以符合混合内容级别 2 的规定。

JavaScript

Safari 18 测试版中的 WebKit 新增了对 Unicode 15.1.0 字符在 RegExp 中的支持。Unicode 15.1 新增了 627 个字符，使字符总数达到 149,813 个。现在，这些新字符可以在正则表达式中使用。

Safari 18 测试版中的 WebKit 还新增了对 RegExp.prototype[Symbol.matchAll] 的 v 标志的支持，提供了更强大的 Unicode 字符匹配方式，符合 ECMAScript 2024 标准的规定。

例如，现在您可以指定仅匹配拉丁字符，同时避免匹配西里尔文字符。

const regex = /\p{sc=Latin}/v;
console.log(regex.test('A')); // true, 'A' is a Latin script character
console.log(regex.test('А')); // false, 'А' is a Cyrillic script character

或者根据表情符号进行字符串拆分。

"a 🥰 b 🥰".split(/[\p{Emoji}--\p{ASCII}]/v)// ["a ", " b ", ""]

Web API

Safari 18 测试版中的 WebKit 新增了对 URL.parse() 的支持，这是一种解析 URL 的方法，在解析失败时返回 null 而不是抛出异常。

// Before
let url = null;
try {
  url = new URL(input, base);
} catch(e) { }

// Now
const url = URL.parse(input, base);

Safari 18 测试版中的 WebKit 通过向 <template> 元素添加 shadowRootDelegatesFocus 和 shadowRootClonable IDL 属性，扩展了对声明式 Shadow tree 的支持。它还向 <template> 元素添加了 shadowRootSerializable 属性和 shadowRootSerializable IDL 属性，使得使用声明式 Shadow roots 的用户可以选择使其可序列化。序列化可以通过同时新增的 getHTML() 方法完成。

Safari 18 测试版中的 WebKit 新增了对 PopStateEvent 的 hasUAVisualTransition 的支持，该属性指示用户代理是否为片段导航准备了视觉过渡。

Safari 18 测试版中的 WebKit 新增了对导入模块脚本中子资源完整性的支持，这为外部托管模块脚本内容的完整性提供了加密保证。

Safari 18 测试版中的 WebKit 新增了对 Request、Response、Blob 和 PushMessageData 对象 bytes() 方法的支持。这取代了网页开发者调用 arrayBuffer() 的需求（后者可能难以使用），并将结果封装在 Uint8Array 中。现在，当您需要访问这些对象所代表数据的底层字节时，调用 bytes() 是推荐的方式。

Safari 18 测试版中的 WebKit 通过暴露 特性检测文本片段，新增了对 document.fragmentDirective 的支持。请注意，返回的对象（一个 FragmentDirective）不提供任何功能，但如果您需要知道浏览器是否支持片段指令，它会很有帮助。

Canvas

Safari 18 测试版中的 WebKit 新增了对 getContext() 方法的 willReadFrequently 上下文属性的支持。它指示是否计划进行大量回读操作。它强制使用软件加速的 2D 或离屏画布，而不是硬件加速。这可以在频繁调用 getImageData() 时提高性能。

Safari 18 测试版中的 WebKit 扩展了 2D canvas 对 currentcolor 的支持。现在可以在 color-mix() 或相对颜色语法中使用它。在这里，currentcolor 将默认为 canvas 元素上计算出的 color 属性值。

WebGL

Safari 18 测试版中的 WebKit 新增了对六个新 WebGL 扩展的支持

• EXT_texture_mirror_clamp_to_edge
• WEBGL_render_shared_exponent
• WEBGL_stencil_texturing
• EXT_render_snorm
• OES_sample_variables
• OES_shader_multisample_interpolation

网页检查器

Safari 18 测试版中的 WebKit 新增了在网页检查器的 CSS 源代码编辑器中进行模糊搜索代码补全的支持。

WKWebView

适用于 iOS 18 测试版、iPadOS 18 测试版、visionOS 2 测试版和 macOS Sequoia 测试版的 WebKit 新增了对两个新 API 的支持——写作工具 API 和控制自适应图像字形插入的 API。通过观看 WWDC24 上的写作工具入门和使用 Genmoji 为您的应用带来表达，了解更多关于这些 API 的信息，这两个视频都将于 6 月 11 日星期二上线。

Apple Pay

Safari 18 测试版中的 WebKit 新增了对 Apple Pay 资金转账的支持。

弃用功能

虽然从网页中弃用旧技术的情况很少见，但有时这样做是合理的。我们一直在忙于移除从未标准化的 -webkit 前缀属性、其他浏览器从未支持的过时媒体格式等等。这有助于统一浏览器引擎，提高互操作性，并通过减少网站依赖非网页标准的可能性来防止兼容性问题。

Canvas

Safari 18 测试版中的 WebKit 移除了对 OffscreenCanvasRenderingContext2D 的 commit() 方法的支持。

CSS

Safari 18 测试版中的 WebKit 弃用了一些很少使用的 -webkit 前缀 CSS 伪类和属性的支持——甚至包括一个 -khtml 前缀属性。

• -webkit-alt 和 alt 属性
• :-webkit-animating-full-screen-transition 伪类
• :-webkit-full-screen-ancestor 伪类
• :-webkit-full-screen-controls-hidden 伪类
• :-webkit-full-page-media 伪类
• :-webkit-full-screen-document 伪类
• :-khtml-drag 伪类

Safari 18 测试版中的 WebKit 也弃用了对 resize: auto 规则的支持。对 resize 属性的支持依然保留，正如 Safari 4 以来一直如此。Safari 继续支持的值包括：none、both、horizontal、vertical、block、inline，以及全局值。CSS Basic User Interface Module Level 3 的早期版本定义了 auto，但后来被从网页标准中移除。

Safari 18 测试版中的 WebKit 还弃用了对 CSSRule 中非标准化的 WEBKIT_KEYFRAMES_RULE 和 WEBKIT_KEYFRAME_RULE API 的支持。

图像

Safari 18 测试版中的 WebKit 移除了对 JPEG2000 图像格式的支持。Safari 是唯一提供过此支持的浏览器。

如果您一直在使用最佳实践提供 JPEG2000 文件，那么您的网站正在使用 picture 元素向所有浏览器提供多种文件格式选项。Safari 18 测试版将不再选择 JPEG2000，而是使用 JPEG XL、AVIF、WebP、HEIC、JPG/JPEG、PNG 或 Gif 压缩的文件——选择最适合每个用户的文件。当您使用 <picture> 时，只会下载一张图像，并且浏览器会完成所有繁重的工作。

我们注意到，一些内容分发网络 (CDN) 使用用户代理嗅探来为每个用户代理提供一个文件，只向 Safari 提供 JPEG2000 图像——尤其是在 iPhone 和 iPad 上。如果您预计您的网站可能出现这种情况，我们建议您在 macOS Sequoia 和 iOS 或 iPadOS 18 上的 Safari 18 测试版中进行测试。如果发现问题，请联系您的 SaaS 提供商或更改您的图像分发设置，以确保您的网站使用行业最佳实践提供回退图像。

如果您发现网站出现问题，请在 webcompat.com 提交问题。

媒体

Safari 18 测试版中的 WebKit 移除了对非标准 VTTRegion.prototype.track 的支持。

存储

Safari 18 测试版中的 WebKit 移除了对 AppCache 的最后一点支持。

当 AppCache 于 2009 年首次在 Safari 4 中出现时，它作为一种用于离线缓存网页的工具，前景广阔。当时 HTML 本身正在进一步扩展以处理更多网络应用程序用例，AppCache 被设想为“HTML5 应用程序缓存”。开发者可以创建一个简单的缓存清单文件，其中包含要缓存的文件列表。它的简单性看起来很优雅，但没有缓存清除机制，这使得网站开发和长期演进都相当令人沮丧。AppCache 也存在安全挑战。因此，新的网络标准被创建来取代它。如今，开发者使用 Service Workers 和 Cache Storage。

WebKit 在 Safari 11.0 中弃用了 AppCache，并在控制台中发出了警告。然后在 2021 年，我们从 Safari 15.0 中移除了对 AppCache 的支持，除了 WKWebView 的第三方用户的一些例外情况。现在我们正在移除这些例外。WebKit 的这一更改只会影响极少数在旧版第三方应用中加载的网页内容，这些应用中的 JavaScript 代码依赖于 AppCache 相关接口的存在。

SVG

Safari 18 测试版中的 WebKit 移除了 SVGAnimateColorElement 接口。

Web API

Safari 18 测试版中的 WebKit 移除了对四个非标准 Web API 的支持

• KeyboardEvent.altGraphKey
• WebCrypto 中的 AES-CFB 支持
• KeyboardEvent.prototype.keyLocation
• HashChangeEvent 的非标准 initHashChangeEvent() 方法

错误修复及更多

除了所有新功能之外，Safari 18 测试版中的 WebKit 还包含了完善现有功能的工作。

辅助功能

• 修复了 <main> 和分段元素内部 <header> 的角色分配问题。
• 修复了通过辅助功能 API 递增或递减时，范围输入不触发输入事件的问题。
• 修复了在插槽上设置 aria-hidden 时无法隐藏插槽的已分配节点的问题。
• 修复了组合框未能正确公开其链接对象的问题。
• 修复了时间输入的可访问性问题，为子字段添加了标签。
• 修复了在 <body> 和 <html> 元素上 aria-hidden=true 被忽略的问题。
• 修复了 datetime 值以错误时区暴露给辅助技术的问题。
• 修复了时间控件的可访问性问题，为上午/下午组件添加了标签。
• 修复了 datetime-local 输入的 datetime 值错误地暴露给辅助技术的问题。
• 修复了 CSS content 属性替换文本为空字符串时被忽略的问题。
• 修复了以下元素的计算角色：dd、details、dt、em、hgroup、option、s 和 strong。
• 修复了 aria-labelledby 定位的隐藏元素会暴露其整个子树文本，而不仅仅是其直接子文本的问题。
• 修复了在 visibility: hidden 容器内 visibility: visible 元素的无障碍名称计算问题。
• 修复了表格标题动态更改时，其无障碍文本未更新的问题。
• 修复了目标元素更改其子树后，aria-describedby 文本未更新的问题。

动画

• 修复了 transition 属性生成最短序列化的问题。
• 修复了 animation 属性生成最短序列化的问题。

身份验证

• 修复了有条件的 UI 请求中止后，navigator.credentials.create() 会因“NotAllowedError: Operation Failed”而拒绝的问题。
• 修复了将 DigitalCredential 的 response 属性重命名为 data 的问题。
• 修复了无论后续请求是否发生，取消完成后都会设置取消标志的问题。

Canvas

• 修复了 drawImage(detachedOffscreenCanvas) 抛出异常的问题。
• 修复了 OffscreenCanvas 无法使用嵌套工作线程渲染到占位符的问题。
• 修复了在切换标签页时，OffscreenCanvas 的占位符画布的内容层丢失的问题。
• 修复了 drawImage 不会更改输入源或目标矩形的问题。
• 修复了在画布父元素上切换可见性会撤销 clearRect() 效果的问题。
• 修复了当图像处于损坏状态时，Canvas drawImage() API 会抛出异常的问题。

CSS

• 修复了在空白或换行符上动态将 white-space 设置为非默认值的问题。
• 修复了将 text-spacing 属性转换为 font 属性的问题。
• 修复了在从右到左的排版中，自定义计数器样式扩展 disclosure-open 和 disclosure-closed 以指向正确方向的问题。
• 修复了 backface-visibility 创建堆叠上下文和包含块的问题。
• 修复了 getComputedStyle() 适用于 ::highlight() 等函数式伪元素的问题。
• 修复了：将 :-webkit-full-screen 伪类别名为 :fullscreen。
• 修复了：将 :-webkit-any-link 别名为 :any-link，将 :matches() 别名为 :is()。
• 修复了 getComputedStyle() 伪元素解析以支持完整的 CSS 语法范围的问题。
• 修复了 @supports 无法正确处理某些被错误视为不支持的 -webkit 前缀伪元素的支持问题。
• 修复了样式更改后更新对媒体查询敏感的 meta 标签的问题。
• 修复了更改颜色方案时，使用系统颜色或 light-dark() 更新渐变的问题。
• 修复了在使用 font-variant-caps: all-small-caps 和 font-synthesis 时，行内元素大小不正确的问题。
• 修复了 :empty 选择器无法与动画配合使用的问题。
• 修复了序列化自定义属性时保留空白字符的问题。
• 修复了非继承自定义属性变异样式更新不正确的问题。
• 修复了被父元素移除的元素最终会丢失最后记忆大小的问题。
• 修复了自定义属性的隐式和显式初始值之间的不正确差异。
• 修复了菜单和菜单文本系统颜色的对比度问题。
• 修复了在序列化和计算值中保持 CSS gap 简写值不变的问题。
• 修复了 @starting-style 的样式调整器错误地调用空元素的问题。
• 修复了 -apple-pay-button 属性不适用于任何支持 appearance: auto 且不是按钮的元素的问题。
• 修复了 CSS 颜色规范中缺少的颜色解释方法。
• 修复了 hsl() 和 hsla() 实现与最新规范更改不符的问题。
• 修复了 rgb() 和 rgba() 实现与最新规范不符的问题。
• 修复了 hwb() 实现与最新规范不符的问题。
• 修复了剩余颜色类型未与最新规范更改同步的问题。
• 修复了在颜色插值时未能传递相似组件的问题。
• 修复了 mask-mode 未能应用填充层图案的问题。

表单

• 修复了 datalist 下拉列表在 DOM 更新后未能同步其 options 元素的问题。
• 修复了 <select multiple> 滚动条无法匹配所用配色方案的问题。
• 修复了从 <datalist> 元素中选择 <option> 时，输入值未更新的问题。
• 修复了 type="email" 且具有 multiple 属性的 input 元素中，value 属性未显示的问题。
• 修复了 <input type=checkbox switch> 的 iOS 动画问题。
• 修复了当窗口不活动时，表单控件仍以活动外观绘制的问题。
• 修复了构造的 FormData 对象默认不包含图像按钮提交者条目的问题。

历史记录

• 修复了当 History 属性不在完全活动文档中时，会抛出 SecurityError 的问题。

HTML

• 修复了“about:blank” document.referrer 初始化问题。
• 修复了自闭合 SVG 脚本元素解析问题。现在可以成功执行。

JavaScript

• 修复了 RegExp.prototype.@@split 未更新以下旧版 RegExp 静态属性的问题：RegExp.input、RegExp.lastMatch、RegExp.lastParen、RegExp.leftContext、RegExp.rightContext 和 RegExp.$1, ... RegExp.$9。
• 修复了如果模式是 RegExp 对象且 lastIndex 不是数字，String.prototype.replace 不会走快速路径的问题。(
• 修复了 Async / Await、生成器、异步函数和异步生成器的规范合规性问题。
• 修复了异步函数和生成器无法正确处理带有抛出“constructor”getter 的 Promise 的问题。
• 修复了异步生成器中的 return 无法正确 await 其值的问题。
• 修复了 Symbol.species getter 共享单个 JS Function 的问题。
• 修复了如果 Set 方法在 size 属性为负值的对象上调用，会抛出 RangeError 的问题。
• 修复了来自另一个 realm 的 eval() 函数导致直接 eval 调用的问题。
• 修复了带有 ...spread 语法的 eval() 调用未能成为直接调用的问题。
• 修复了 try/catch 无法拦截派生类 [[Construct]] 中产生的错误的问题。
• 修复了几个问题：
  • 在 rest 参数内的默认值表达式中，直接 eval() 会在函数环境中创建变量，而不是在参数的独立环境中创建；
  • 当在 eval() 中访问在 rest 参数内定义的绑定，或在前面参数的默认值表达式中创建的闭包时，会抛出 ReferenceError，但前提是存在同名的 var 绑定；
  • 在 rest 参数内的默认值表达式中创建的闭包，其 VariableEnvironment 与前面参数中的对应闭包不同，这导致在查询或修改被 var 绑定“遮蔽”的参数名称时，会咨询到错误的环境。
• 修复了 TypedArray 排序方法在比较器返回 false 时没有特殊处理的情况。
• 修复了 setExpectionPorts 中按位与的编程风格问题。
• 修复了 emitReturn() 在 TDZ 检查之前未能从箭头函数词法环境中加载 this 值的问题。
• 修复了 NFKC 规范化无法与 Latin-1 字符配合使用的问题。
• 修复了带 Unicode 起始字符的私有名称解析问题。
• 修复了 instanceof 在 LHS 为原始类型时未能获取 RHS 原型的问题。
• 修复了方括号更新表达式未最多解析一次属性键的问题。
• 修复了方括号复合赋值未最多解析一次属性键的问题。
• 修复了 Object.groupBy 和 Map.groupBy 无法适用于非对象的问题。
• 修复了 Array.fromAsync 调用 Array 构造函数两次的问题。
• 修复了 Function.prototype.toString 对于访问器属性输出不一致的问题。
• 修复了 Set#symmetricDifference 在每次迭代中未能调用 this.has 的问题。
• 修复了当赋值的左侧是函数调用时，逻辑赋值表达式未能抛出语法错误的问题。
• 修复了 RegEx 中嵌套的重复命名捕获组未能抛出语法错误的问题。
• 修复了 ArrayBuffer 和 SharedArrayBuffer 构造函数在创建实例前未能检查长度的问题。
• 修复了 Intl 实现未能根据规范更新将“GMT”规范化为“UTC”的问题。
• 修复了 RegEx 后向断言与 v8 不同的问题。
• 修复了如果省略 Intl.DurationFormat 的 fractionalDigits，未能将其视为最多 9 位数字的问题。

加载

• 修复了当 cookie 被阻止时，navigator.cookieEnabled 未返回 false 的问题。

媒体

• 修复了在 visionOS 的标签栏中切换标签页后，视频声音来自另一个窗口的问题。
• 修复了某些网站上 MSE 视频的播放问题。
• 修复了视频的 currentTime 超过间隙开始时间的问题。
• 修复了带有 Vorbis 音轨的 WebM 文件音频播放损坏的问题。
• 修复了 sampleRate 和 numberOfChanges 在有效的 AudioEncoderConfig 中应为必需且非零的问题。
• 修复了媒体元素重复追加同一媒体片段的问题。
• 修复了如果“小时”使用 1 位数字定义，会拒绝有效 NPT 字符串的问题。
• 修复了 Safari 音频在 visionOS 中可能从错误窗口发出的问题。

网络

• 修复了在可能混合安全上下文中，将不活动或被动子资源请求和抓取升级以符合标准的问题。
• 修复了嵌套文档导航时 Sec-Fetch-Site 值不正确的问题。
• 修复了使用非持久性数据存储加载 WebArchives 的问题。
• 修复了 Timing-Allow-Origin 不适用于 HTTP 302 响应的问题。

PDF

• 修复了带有打印操作实现的打印按钮问题。
• 修复了名称中带有空格的 PDF 无法在预览中打开的问题。

渲染

• 修复了希腊语大写转换对某些字符失败的问题。
• 修复了带有 1rem 填充的 <textarea> 元素无法调整大小的问题。
• 修复了颜色矩阵滤镜的颜色正确性问题。
• 修复了 backdrop-filter 未能应用于带有 border-radius 元素的边框区域的问题。
• 修复了固有行内大小计算器未考虑非零边距空子元素前的空白字符的问题。
• 修复了当 height: 100% 应用于嵌套内容时，弹性盒元素重叠的问题。
• 修复了流外兄弟元素导致网格项定位不正确的问题。
• 修复了 break-word 与浮动元素一起使用时丢弃文本的问题。
• 修复了未样式化的 only-child 行内元素的 min-content 计算问题。
• 修复了在使用 position: relative 和 top 时省略号多次渲染的问题。
• 修复了在延续块中，行内元素以反向顺序插入的错误。
• 修复了调整窗口大小时，页面底部背景色条闪烁的问题。

滚动

• 修复了在某些页面上，内容在其下方滚动时，光标未更新的问题。

SVG

• 修复了 SVG 解析器未将“form feed”解释为空白字符的问题。
• 修复了无效滤镜原始引用错误处理问题。
• 修复了在 <switch> 元素内显示 SVG 元素的问题。
• 修复了 SVG 标题默认 UA 样式规则为 display: none 的问题。
• 修复了 SVG 中链接的 UA 样式表未能应用符合标准的 cursor: pointer 的问题。
• 修复了如果 SVG 渐变 stop-color 未在页面中渲染，未能返回其初始值的问题。
• 修复了如果标记路径包含子路径，SVG 标记段计算错误的问题。
• 修复了 SVGLength 未与 WebIDL 规范同步的问题。

Web 动画

• 修复了当 width 和 height 动画时，百分比变换动画问题。
• 修复了当 transform 属性通过隐式关键帧动画时，更改其值后动画未更新的问题。
• 修复了使用 color-mix 动画的问题。

Web API

• 修复了当序列化不同时，cssText setter 未能更改 style 属性的问题。
• 修复了 history.pushState() 和 history.replaceState() 忽略 title 参数的问题。
• 修复了 URL 文本片段指令未能从 JavaScript 中完全剥离的问题。
• 修复了 showPicker() 方法未能触发 datalist 建议的问题。
• 修复了无命名空间中的 lang 属性仅应用于 HTML 和 SVG 元素的问题。
• 修复了不必要地取消设置 iframe 全屏标志的问题。
• 修复了 DOM Range 未能正确处理 CDATASection 节点的问题。
• 修复了 getGamepads() 不再触发不安全上下文警告的问题。
• 修复了插入 <picture> 元素会显示相同图像两次的问题。
• 修复了在分离状态下，导航方法会抛出异常的问题。
• 修复了 URL 的 host setter 中的一个小问题。
• 修复了根据 DOM 标准澄清后，ShadowRoot 节点克隆问题。
• 修复了 GeolocationCoordinates 未公开 toJSON() 方法的问题。
• 修复了 GeolocationPosition 未公开 toJSON() 方法的问题。
• 修复了分派事件时未设置 CustomEvent.target 的问题。
• 修复了在 iOS 17.4 中 navigator.language 仅返回系统语言的问题。
• 修复了：从 <hr> 元素的 width 属性中移除了表示性提示。

Web 应用

• 修复了所有 Web 应用的关联域未能解析 www. 子域的问题。

WebAssembly

• 修复了可移植引用类型全局变量初始化问题。

网页检查器

• 修复了“审计”选项卡中的字体大小问题。
• 修复了“存储”展开部分未能折叠的问题。
• 修复了使用交互式编辑控件时，标记为 !important 的 CSS 字体属性值未被覆盖的问题。
• 修复了 Web Inspector 视口可能显示被截断的问题。
• 修复了“审计”选项卡中运行时未对齐的问题。
• 修复了“控制台”选项卡中未能记住消息类型选择的问题。
• 修复了 text-indent 属性的自动完成功能建议前缀属性而不是 each-line 或 hanging 的问题。
• 修复了 background 自动完成建议未包含 repeating-conic-gradient 的问题。
• 修复了 Web Inspector 重新打开时控制台意外清除的问题。
• 修复了控制台代码完成功能未能区分大小写的问题。
• 修复了从 DOM 树中高亮显示元素时，overflow: scroll 元素未能按预期滚动的问题。
• 修复了在“开发”菜单中未能显示来自 iOS 设备的额外 Safari 标签页的问题。
• 修复了控制台和代码编辑器完成功能未能自动滚动建议以使其可见的问题。
• 修复了 DOM 树视图中的搜索意外更改文本显示的问题。
• 修复了当“显示独立样式侧边栏”禁用时，单击计算 CSS 的“跳转”箭头的问题。
• 修复了 visionOS 模拟器中 Safari 的可检查标签页未在主机 macOS 上的“开发”菜单中显示的问题。

Web 视图

• 修复了 WKWebView 中的 Gamepad API 问题。
• 修复了旧版 WebView 中 HTML 元素宽度或高度更改时未能重新绘制的问题。

WebRTC

• 修复了当 VideoTrackGenerator 的生成器轨道（及其所有克隆）停止时，其写入器未能关闭的问题。
• 修复了 iPhone 15 Pro 上的 WebRTC AV1 硬件解码问题。
• 修复了屏幕共享窗口出现黑条纹的问题。
• 修复了当窗口调整大小时，通过 getDisplayMedia 捕获的窗口出现黑条纹的问题。

帮助我们 Beta 测试

您可以通过安装 macOS 15、iOS 18 或 iPadOS 18 的测试版来测试 Safari 18 测试版。或者，如果您愿意，可以在 macOS Sonoma 或 macOS Ventura 上试用 Safari 18 测试版，方法是下载Safari 18 测试版（一旦可用）。(使用免费的 Apple ID 登录即可下载。在 macOS Sonoma 或 macOS Ventura 上安装 Safari 18 测试版将替换您现有的 Safari 版本，并且无法恢复到早期版本。) 您也可以在 Safari 技术预览版中帮助测试许多这些功能。

反馈

我们很高兴收到您的反馈。要分享您对 Safari 18 测试版的看法，请在 Mastodon 上找到我们：@jensimmons@front-end.social 和 @jondavis@mastodon.social。或者在 X 上向 @webkit 发送回复。您也可以在 LinkedIn 上关注 WebKit。如果您遇到任何问题，欢迎您就 Safari UI 提供反馈（了解更多关于提交反馈的信息），或提交关于 Web 技术或 Web Inspector 的 WebKit 错误报告。如果您发现某个网站在 Safari 中似乎损坏，但在其他浏览器中正常，请在 webcompat.com 提交报告。提交问题确实会带来改变。

在 macOS 上下载最新的 Safari 技术预览版，以保持在 Web 平台的最前沿并使用最新的 Web Inspector 功能。

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