Safari 15 中的新 WebKit 功能

2021 年 10 月 26 日

作者：Jen Simmons

随着 macOS Monterey、iPadOS 15、iOS 15 和 watchOS 版 Safari 15，以及 macOS Big Sur 和 macOS Catalina 版 Safari 15 的发布，WebKit 在隐私和安全性方面带来了显著进步，改进了互操作性，并为网页开发者提供了大量新功能。快来看看吧。

Web 扩展

此版本将 Safari Web 扩展引入 iOS 和 iPadOS。Web 扩展使用 HTML、CSS 和 JavaScript 提供强大的浏览器自定义功能。现在，开发者可以为支持 Safari 的每台设备创建它们，使用的 API、功能和权限在所有浏览器中日益标准化。通过观看 WWDC21 上的《在 iOS 上了解 Safari Web 扩展》来学习如何构建 Safari Web 扩展，并了解如何转换现有扩展。

今年的版本还增加了对 Declarative Net Request WebExtensions API 的支持，以阻止网页内容。通过观看 WWDC21 上的《探索 Safari Web 扩展改进》来了解所有最新的 WebExtension API。

HTML

WebKit 现在支持 HTML meta 标签和 Web Manifest 中的 theme-color。通过指定主题颜色，网页开发者可以在 iOS 15 上的 Safari 中更改状态栏和过滚动区域的颜色。主题颜色还会更改 macOS Monterey 和 Big Sur 以及 iPadOS 15 上 Safari 15 紧凑标签布局中的标签栏和过滚动区域背景颜色。

在 HTML meta 标签中，开发者可以使用 media 属性为深色模式和浅色外观指定不同的颜色。

<meta name="theme-color" 
      content="#ecd96f" 
      media="(prefers-color-scheme: light)">
<meta name="theme-color" 
      content="#0b3e05" 
      media="(prefers-color-scheme: dark)">

观看 WWDC21 上的《为 Safari 15 设计》，了解有关紧凑标签栏和如何使用 theme-color 的更多信息。

CSS

demo of aspect ratio property

WebKit 现在支持 CSS aspect-ratio。此属性可用于设置任何元素的推荐宽高比，包括像 divs 这样的盒子、用于嵌入视频的 iframes，或页面上的图形设计元素。

WebKit 支持来自 Color Level 4 的新 lab()、lch()、hwb() 颜色语法，为网页开发者提供了在 Lab、Lch 和 Hue-Whiteness-Blackness 中表达更丰富颜色范围的方式。WebKit 还支持使用 color() 函数语法预定义的颜色空间：srgb、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz。

WebKit 支持 list-style-type 的 12 个新值：disclosure-closed、disclosure-open、ethiopic-numeric、japanese-formal、japanese-informal、korean-hangul-formal、korean-hanja-formal、korean-hanja-informal、simp-chinese-formal、simp-chinese-informal、trad-chinese-formal 和 trad-chinese-informal。

list-style-type 现有值的实现也得到了改进：armenian、cjk-ideographic、hebrew、lower-armenian、lower-roman、upper-armenian 和 upper-roman。请在 MDN 查看所有这些选项的演示。我们还更新了 WebKit 对 list-style-position:inside 的实现，以匹配更新的 CSS 规范，在经过长达 22 年的争论后实现了互操作性。

观看 WWDC21 上的《为 Safari 15 设计》，了解 CSS 的最新更新。

Web 检查器

screenshot of Safari 15's CSS Grid Inspector

Safari 15 中的 Web 检查器包含一个 CSS 网格检查器叠加层，用于检查页面上的网格容器。观看 WWDC21 上的《探索 Web 检查器改进》以了解更多信息。

JavaScript 和 WebAssembly

此版本的 WebKit 增加了对 Workers 和 ServiceWorkers 中 ES6 模块的支持。ES6 模块为开发者提供了一种强大的方式，可以使用特定用途的库来组织大型应用程序。Workers/Service Workers 提供了一种将工作从主线程卸载的方式，通常用于复杂的应用程序。现在，开发者可以同时使用它们——将工作从主线程移开，提高性能，同时保留模块的组织优势。

JavaScript 引擎的其他新功能包括：

  • 支持顶层 await
  • Error.cause
  • 私有类方法和访问器
  • BigInt64Array 和 BigUint64Array

WebAssembly 的改进包括流式编译、批量内存操作、引用类型以及从 float 到 int 的无陷阱转换。

通过观看 WWDC21 上的《开发高级 Web 内容》，您可以了解更多关于 WebKit 和 Safari 15 中最新的 JavaScript 和 WebAssembly 更新。

Web API

gorgeous weird 3D environments created to show off what's possible

WebKit 现在支持 WebGL2（演示）。此外，WebGL 实现现在运行在 Metal 之上，以提供更好的性能。

Web Share level 2 对 Web Share 的增强功能支持从网页向应用程序共享文件。更多信息请参阅Web Share API。

用户手势现在通过 requestAnimationFrame 传播，并设有一秒的时间限制。

现在，通过 Safari 15.1，performance.timeOrigin 在 Web Workers 中可用。

通过观看 WWDC21 上的《开发高级 Web 内容》，您可以了解更多关于 WebKit 中最新的 Web API。

媒体

Safari 15 包含多项针对用户和开发者的媒体改进。例如，内置媒体控件现在有“播放速度”和“章节”菜单。此外，语言/字幕轨道菜单现在可在 iOS 和 iPadOS 上使用。

还新增了对 WebM 容器中 Opus 音频编解码器的支持。在所有支持 iPadOS 15 的 iPad 上，Media Source Extensions (MSE) 中的 VP9 和 WebM 现在都支持硬件加速。

Safari 15 还增加了对 MediaSession API 的支持，以启用同播共享体验。通过观看 WWDC21 上的《通过群组活动在 Safari 中协调媒体播放》，您可以了解更多关于创建同播共享体验的信息。

安全和隐私

秉承我们对隐私和安全的承诺，iOS 15 和 macOS Monterey 上的 Safari 支持自动 HTTPS 升级，并对已知跟踪器隐藏您的 IP 地址。Safari 15 在旧版 macOS 上也支持自动 HTTPS 升级。

今年早些时候，Safari 是第一个发布隐私保护广告衡量网络标准的浏览器——私密点按测量 (Private Click Measurement, 或 PCM)。Safari 15 对 PCM 提供了三项主要更新：

  • 归因报告也会发送到点击目的地。
  • 使用不可链接的令牌防止点击欺诈。
  • 归因报告的 IP 地址保护。

要了解更多信息，请阅读《PCM：防止点击欺诈并将归因发送给广告商》或观看 WWDC21 上的《了解隐私保护广告归因》。

认证和密码

WebKit 现在支持在您的应用程序或网站中使用设备上的验证码，从而通过 iCloud 钥匙串密码管理器获得更安全的登录体验。要在 Safari 和自动填充中使用验证码：

  • 使用 autocomplete=one-time-code 使 符合自动填充条件。
  • 使用标准 otpauth URL 并将 scheme 替换为 apple-otpauth，可直接链接到密码管理器进行设置。
  • 使用位图图像启用 otpauth 二维码上的上下文菜单，该菜单提供设置验证码生成器的选项。

通过观看 WWDC21 上的《使用 iCloud 钥匙串验证码安全登录》，了解如何在您的应用和网站中支持此过程。

a diagram of how private keys are routed with WebAuthn

尽管密码很普遍，但它们本身就存在挑战，使其不适合保护在线帐户。通行密钥 (Passkeys) 是一种 WebAuth 凭据，旨在通过设备同步和备份取代网站和应用程序的密码。这项技术现在已作为预览版在 WebKit 中提供。要在 Safari 中启用，请选择“开发”>“启用同步平台验证器”。通过观看 WWDC21 上的《超越密码》，了解更多信息。

支付

Apple Pay 增强功能允许使用 Payment Request API 的开发者指示运输方式的预计到达日期，支持优惠码，并将运输方式标记为店内取货。

可用性

这些改进适用于在 iPadOS 15、iOS 15 上运行 Safari，或在 macOS Monterey、macOS Big Sur 或 macOS Catalina 上运行 Safari 15 的用户。这些功能在 Safari 技术预览版中也对网页开发者可用。此 Safari 版本中的更改已包含在以下 Safari 技术预览版中：123、124、125、126、127、128、129。

下载最新的 Safari 技术预览版，以站在未来 Web 平台和 Web 检查器功能的最前沿。您还可以使用 WebKit 功能状态页面来关注您感兴趣的 Web 平台功能的变化。

反馈

如果您遇到任何问题，欢迎您提交针对 Safari 的错误报告或针对 Web 内容问题的 WebKit 错误报告。发推特给我们 @webkit，分享您对本次发布的看法。