Safari 18.0 中的 WebKit 功能

iPhone 镜像和远程检查

借助 macOS Sequoia 上的 iPhone 镜像功能，您可以在 Mac 上使用 iPhone。将其与 Safari 的远程检查功能结合，现在使用 Web Inspector 在 iOS 上测试和调试网站比以往任何时候都更容易。

首先确保您的 Mac 上已启用 Safari 的开发者工具（如果您在 Safari 中能看到“开发”菜单，则已完成此步骤），以进行远程检查设置。接下来，在您的 iPhone 上，前往“设置”>“应用”>“Safari 浏览器”>“高级”>“Web Inspector”启用 Web Inspector。然后，您需要使用数据线将设备连接到 Mac 以授予权限。连接后，您的设备将显示在 Safari 的“开发”菜单中。最后，要启用无线调试，请前往 macOS 上的 Safari >“开发”>“[您的设备]”>“通过网络连接”。

现在您可以随时使用 Web Inspector 无线调试在 iPhone 上运行的网站。借助 iPhone 镜像功能，您甚至无需拿出手机，一切都在 Mac 的屏幕上。

通过阅读《检查 iOS 和 iPadOS》或观看 WWDC 的《重新发现 Safari 开发者功能》，了解更多关于远程检查的信息。访问 apple.com 了解更多关于 iPhone 镜像功能1的信息。

Mac 版网页应用

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

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

打开链接

macOS Sequoia 添加了直接在网页应用中打开链接的支持。现在，当用户点击链接时，如果该链接与网页应用的 scope 匹配，则该链接将在网页应用中打开，而不是在其默认网页浏览器中打开。例如，假设您已将 MDN Web Docs 添加到 Dock 中。然后，同事在“信息”、“邮件”、“Slack”、“Discord”、“IRC”或 Mac 上的任何非浏览器应用程序中向您发送一个 MDN 页面的链接。现在当您点击该链接时，它将在 MDN Web Docs 网页应用中打开，而不是在您的默认浏览器中打开。

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

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

扩展支持

现在用户可以通过 Safari 网页扩展和内容拦截器个性化 Mac 上的网页应用。导航到网页应用的“设置”菜单以访问所有已安装的内容拦截器和网页扩展。任何在 Safari 中启用的扩展在网页应用中都将默认开启。每个网页应用都可以独特地自定义，就像 Safari 配置文件一样。

CSS

视图过渡

WebKit 在 Safari 18 中添加了对 View Transitions 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;

}

当视图过渡运行时，:active-view-transition 伪类在根元素上变为活动状态。

以下示例演示了带标签导航的状态管理。每个标签视图都有一个自定义的过渡动画出场和略微不同的动画入场，而标签本身则依赖于默认页面过渡。

在此演示中查看视图过渡的实际效果。

样式查询

Safari 18.0 的 WebKit 添加了在测试 CSS 自定义属性时对样式查询的支持。与开发者使用 Sass 混合器的方式类似，样式查询可用于定义一组可重用样式，并以组的形式应用。

在这里，如果 --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.0 中（第一个提供支持的浏览器），您可以在定义新颜色时引用 currentcolor 或系统颜色关键词。例如，此代码将背景颜色设置为与文本颜色相同，但在 oklch 颜色空间中计算后，亮度增加 4 倍。

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

在此演示中查看 `currentcolor` 如何与相对颜色语法一起使用。

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

相对颜色语法让您可以在 CSS 中定义颜色之间的动态连接，减少了在严格的设计系统中通过变量控制颜色的需求。通过观看 WWDC23 的《CSS 新功能》中的此部分，了解更多关于相对颜色语法的信息。

半透明强调色

accent-color 中的半透明颜色现在与 Canvas 系统颜色混合，以匹配最新的网页标准更新。这意味着，任何使用 alpha 通道定义颜色的多种方法，在用于为表单控件定义强调色时，都将按预期工作。

.form-control {

accent-color: rgba(0,0,0,0.6);

}

动画显示

Safari 18.0 的 WebKit 添加了对 display 属性过渡动画的支持。

许多开发者很高兴能将 @starting-style 与 transition-behavior 和 display: none 插值结合使用。适用于Safari 17.4 的 WebKit 添加了对 transition-behavior 的通用支持，包括 transition-behavior: allow-discrete。适用于Safari 17.5 的 WebKit 添加了对 @starting-style 的支持，允许您为创建（或重新创建）元素时定义过渡的起始值。现在在适用于 Safari 18.0 的 WebKit 中，您可以将这些功能结合使用来过渡 display 属性。

背景滤镜

背景滤镜最初随 Safari 9.0 发布，它提供了一种将图形效果应用于特定元素背后内容的方式。例如，您可以将 backdrop-filter 应用于标题，标题后面的所有内容都将模糊，或饱和度降低，或对比度增加。SVG 中的任何滤镜函数都可以使用——blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate() 和 sepia()。

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

在此演示中查看背景滤镜的可能效果。使用下拉菜单切换滤镜。

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

内容可见性

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

更多

Safari 18.0 的 WebKit 添加了对 prefers-contrast 媒体查询的 custom 值解析支持。（它在 Apple 平台上不返回“true”，因为 iOS、iPadOS、macOS 或 visionOS 中没有强制颜色模式。）

空间网络

WebXR

visionOS 2 上的 Safari 18.0 添加了对 WebXR 沉浸式 VR 会话的支持。现在，您可以为使用 Apple Vision Pro 的用户创建完全沉浸式体验，并通过网络提供这些体验。WebXR 场景使用由 WebGL 驱动的硬件加速图形显示。

试用《国际象棋花园》演示，查看 WebXR 的实际效果。

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

在您的 WebXR 体验中使用 transient-pointer 来支持诸如此类的交互，即玩家用手捏合和拖动以移动棋子。

如果您想动画化用户的 3D 手部模型，visionOS 2 的 Safari 还包括对 WebXR 手部追踪的支持。为确保隐私，在 WebXR 会话开始时会向用户请求允许手部追踪的权限。

通过观看 WWDC 的《使用 WebXR 构建沉浸式网页体验》，了解 visionOS 2 上 WebXR 的所有信息。通过阅读《在 Apple Vision Pro 中引入 WebXR 的自然输入》，了解更多关于 transient-pointer 输入模式的信息。并通过阅读《在空间网络中试用您的网站》，了解如何在 Mac 上使用 Safari 的开发者工具在 Apple Vision Pro 中进行检查和调试。

空间照片和全景图

在 Apple Vision Pro 上，您可以获得的一种令人惊叹的体验是查看空间照片和全景图。网页是与他人分享这些照片的好地方。

当您在 visionOS 中打开“照片”应用时，您会看到您的照片库。当您轻点一张图片时，它会独自出现在您面前的一个浮动框架中。空间照片以恰到好处的高度和视角出现，让您感觉仿佛回到了某个时刻。第二次轻点 UI 会将空间照片从其框架中打破，变得更加沉浸。同样，全景图在第一次轻点时会浮动在框架中。然后第二次轻点 UI 时，它会展开并环绕您，创造一个完全沉浸式的体验。

现在，在 visionOS 2 上的 Safari 18.0 中，您可以使用 JavaScript Fullscreen API 在网络上创建类似的体验。您可以将照片嵌入到网页中，并提供轻点功能。随着 Safari 窗口的消失，照片将弹入一个浮动框架中。然后，当用户轻点 visionOS 提供的空间照片或全景图 UI 时，照片将进一步展开，创造更具沉浸感的体验。当他们退出图片时，Safari 窗口将返回。

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

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

document.querySelectorAll('.go-fullscreen').forEach(element => {

element.addEventListener('click', async () => {

await element.requestFullscreen();

});

});

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

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

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

这种技术也会导致支持 Fullscreen API 的任何浏览器中的图像进入全屏。通过观看 WWDC 的《优化空间网络》，了解更多关于将全景图和空间照片添加到您网站的信息。

visionOS 上交互区域的形状

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

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

现在在 visionOS 2 的 Safari 中，当您使用 CSS clip-path 更改链接可轻点区域的形状时，可见的交互区域也会随之改变形状。使用 SVG 和 cursor: pointer 构建的交互式 UI 元素也将以正确的形状高亮显示。通过观看 WWDC 的《优化空间网络》，了解更多信息。

visionOS 上的视频

visionOS 2 的 Safari 添加了将全屏视频停靠到当前“环境”的支持。用户在观看全屏视频时，可以随时轻点山形符号以进入沉浸式体验。转动数字表冠可调整沉浸感。

HTML

书写建议

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

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

在此演示中尝试有无书写建议的区别。请务必使用提供书写建议并支持 writingsuggestions 的浏览器和操作系统。

开关

适用于 iOS 18 的 Safari 的 WebKit 添加了对 的触觉反馈支持。这意味着，现在当用户在 iPhone 上轻点开关控件时，会感觉到一次轻点——就像在 iOS 的“设置”应用中切换开关的感觉一样。尝试此演示，看看它是怎样的。

日期和时间输入

适用于 macOS 的 Safari 18.0 的 WebKit 改进了日期和时间输入字段类型的辅助功能支持。现在，、 和 元素可以与 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.0 的 WebKit 添加了对 ariaBrailleLabel 和 ariaBrailleRoleDescription 元素反射属性的支持。这使得可以直接通过 JavaScript API 获取和设置 DOM 元素上的 aria-braillelabel 和 aria-brailleroledescription ARIA 属性，而无需使用 setAttribute 和 getAttribute。

JavaScript

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

适用于 Safari 18.0 的 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.0 的 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.0 的 WebKit 通过为