Safari 14.1 中的新 WebKit 功能

2021 年 4 月 29 日

作者：Jon Davis

适用于 macOS Big Sur、iPadOS 14.5 和 iOS 14.5 的 Safari 14.1 为 Web 开发人员带来了新的 WebKit 功能、API、性能改进和更好的兼容性。请看下文。

Flexbox Gap 支持

Safari 14.1 现在支持 Flexbox 容器中的 gap 属性，以及 row-gap 和 column-gap。Flexbox 中的间隙（gap）使 Web 开发人员能够轻松地在 Flex 项目之间创建空间，而无需使用烦人的外边距技巧。

gap 属性当然自 Safari 12 以来就已在 Grid 容器中工作。由于 gap 已受 Grid 支持，因此无法通过功能查询（@supports）来测试 Flexbox 格式化上下文中的该属性支持情况。通过在 Flexbox 中添加对 gap 的支持，Safari 使 Web 更接近广泛兼容性。


有关更多信息，请参阅CSS 盒模型对齐规范中《行和列间距》一节关于“flex 容器”的定义。

macOS 上的日期和时间输入

在 HTML 中，input 元素的 date、time、datetime-local 属性会提示浏览器创建日期和/或时间控件——这是一种旨在让用户轻松输入时间或日期的界面，通常带有日历。自 2012 年以来，Safari 就已在 iOS 上支持这些输入字段。现在，随着 Safari 14.1 的发布，这些字段在 macOS 上也得到了支持。

Date picker interface for date input field with time and date-time inputs

CSS 单独变换属性

借助 WebKit 对单独变换属性的支持，Web 开发人员可以更直接地编写 CSS 规则和关键帧动画。

多年来，transform 属性一直提供缩放、旋转和平移的功能。你可以通过以下代码来使用此功能：

transform: translate(100px, 100px) rotate(180deg) scale(2);

现在，如果你愿意，可以改为编写：

translate: 100px 100px;
rotate: 180deg;
scale: 2;

这是一个语法和概念上的区别——结果是相同的。你可能会觉得它更容易理解和记忆。

这种语法还避免了对其他变换相关属性的无意覆盖，并消除了在使用关键帧动画时预先计算中间值的需要。

你可以通过阅读 WebKit 博客上的“CSS 单独变换属性”了解更多信息。

绘制计时 API

衡量 Web 内容性能的一个有价值的指标是用户代理向用户显示内容所需的时间。WebKit 将绘制计时 API 添加到其性能 API 套件中，以提供此测量。开发人员可以测量：

  • first-paint：用户代理显示任何非默认背景像素所需的时间
  • first-contentful-paint：用户看到文本或图像等内容所需的时间

要了解有关该 API 的更多信息，请参阅绘制计时规范。

Web 语音 API

WebKit 中的 Web 语音 API 已支持语音合成一段时间了。现在，Safari 支持由与 Siri 相同的语音引擎提供支持的语音识别。这意味着 Web 开发人员可以享受针对 50 多种语言和方言的高质量转录优势。请注意，用户需要在 macOS 的“系统偏好设置”或 iOS/iPadOS 的“设置”中启用 Siri，才能使用此 API。

有关 Web 上的语音识别和语音合成的更多信息，请参阅Web 语音 API 规范。

Web 音频 API

作为持续关注的领域，Safari 的兼容性改进正在进行中。Web 音频 API 的更新使其符合标准。它现在已无需前缀即可使用，并支持通过 Audio Worklets 进行高级音频处理。

你可以从Web 音频 API 规范中了解更多关于 Web 音频的信息。

互操作性改进

WebKit 中有几项新的互操作性改进：

  • Web 动画现在适用于额外 122 个属性
  • 除 ::before 和 ::after 之外的伪元素动画。
  • 改进了 iPadOS 和 Catalyst 应用中的鼠标支持，包括滚轮事件和 hover/pointer 媒体查询

更新后的滚轮事件处理改进了性能以及与其他浏览器的互操作性。在根对象（window/document/body）上注册的默认参数的滚轮事件处理程序将被视为被动。希望阻止由 macOS 触控板滑动等手势导致的滚轮事件默认处理的页面，现在必须在序列中的第一个滚轮事件上调用 preventDefault()。

MediaRecorder API

WebKit 添加了对 MediaStream Recording（也称为 MediaRecorder API）的支持。它允许网站录制音频和视频，然后使用平台可用的一组默认编码对其进行编码。

在MediaStream Recording 规范中了解更多信息。

WebM 支持

WebKit 改进了对 WebM 媒体的支持。在 Safari 14 中，WebKit 通过 MSE 在 iPadOS 和 macOS 上添加了对 WebM 的支持。现在，macOS 上的 WebKit 支持包含 VP8 或 VP9 视频轨道和 Vorbis 音频轨道的 WebM 文件。开发人员现在可以向用户提供 WebM 内容，尽管用户使用 h.264 或 HEVC 将获得最佳质量和能效。

有关详细信息，请参阅WebM 项目。

JavaScript 改进

类字段

WebKit 中 JavaScript 引擎的更新增加了对私有类字段的新支持，以强制执行 ES6 类中静态和实例字段的限制。以前使用约定的开发人员可以切换到内置支持来管理属性访问。公共静态类字段也可用，作为先前支持的公共实例类字段的补充。

要了解更多信息，请参阅公共和私有实例字段提案。

国际化 API

新的国际化 API 功能包括 Intl.DisplayNames、Intl.ListFormat 和 Intl.Segmenter。Intl.DateTimeFormat 已更新以支持 dateStyle 和 timeStyle 选项。Intl.NumberFormat 方法已更新，支持显示测量单位、表示法格式、符号显示和窄符号货币格式。

有关这些格式化方法的更多信息，请参阅以下提案：Intl.DisplayNames、Intl.ListFormat、Intl.Segmenter、Intl.DateTimeFormat 和 Intl.NumberFormat。

WeakRef 和 FinalizationRegistry

WeakRef 支持持有当没有强引用指向时可以被垃圾回收的对象。FinalizationRegistry 对象是对 WeakRef 的补充，用于在目标对象被垃圾回收时管理清理任务。

在WeakRefs 提案中阅读更多详情。

WebAssembly

WebAssembly 支持，随 Safari 11 引入，是一种低级二进制格式，用作现有语言的编译目标。

线程

Safari 14.1 中已启用 WebAssembly 对线程规范中原子指令的支持。请注意，在 Safari 支持 COEP/COOP 标头之前，共享内存未启用，因为它可能会使用户面临跨源 Specter 数据泄露的风险。

有关更多信息，请参阅 WebAssembly WASM 线程规范。

WebAssembly 符号扩展运算符

新的符号扩展运算符支持在扩展整数位数的同时保留数字的符号。

在符号扩展操作提案中了解更多信息。

JavaScript BigInt 集成

对新的 JavaScript API 的支持允许将 JavaScript BigInt 值双向转换为 WASM 64 位整数。

请参阅 WebAssembly toJSValue 规范。

私有点击测量

此版本包含私有点击测量——一项拟议的 Web 标准，使广告商能够以保护隐私的方式衡量点击广告活动的有效性。这项新技术是旨在从 Web 中移除跨站点跟踪并在需要时提供隐私保护替代方案的更大努力的一部分。

请参阅 WebKit 博客上的“引入私有点击测量 (PCM)”。

存储访问 API 更新

WebKit 改进了存储访问 API，以允许每页存储访问并允许嵌套 iframe 请求存储访问。这些互操作性更改源于与 Mozilla、Microsoft 和 Web 社区共同进行的存储访问 API 的持续标准化工作。此 API 自 2018 年以来已在 Safari 中发布，是旨在从 Web 中移除跨站点跟踪并在需要时提供隐私保护替代方案的更大努力的一部分。

有关详细信息，请参阅 WebKit 博客上的“存储访问 API 更新”。

Web 检测器更新

这些版本中 Web 检测器的更新包括：

  • “元素”选项卡中新的三面板布局将“样式”侧边栏带入一个独立面板，与现有详细信息侧边栏并排显示。
  • 新的“字体”面板让内容作者能够查看页面上使用的字体的详细信息。
  • “源”选项卡中的断点现在可以配置条件或操作，减少了在生产代码中留下零散 console.log 语句的需要。

要了解有关 Web 检测器功能的更多信息，请参阅Web 检测器参考文档。

可用性

这些改进适用于在 iPadOS 14.5、iOS 14.5 上运行 Safari 的用户，或在 macOS Big Sur (11.3)、macOS Catalina 或 macOS Mojave 上运行 Safari 14.1 的用户。这些功能也已在 Safari 技术预览版中提供给 Web 开发人员。Safari 此版本中的更改已包含在以下 Safari 技术预览版中：110、111、112、113、114、115、116、117、118、119、120、121、122。

下载最新的 Safari 技术预览版，以保持对未来 Web 平台和 Web 检测器功能的领先了解。你还可以使用WebKit 功能状态页面来关注你感兴趣的 Web 平台功能的变化。

反馈

如果你遇到任何问题，欢迎提交针对 Safari 的错误报告，或针对 Web 内容问题的WebKit 错误。发送推文至@webkit，分享你对此版本的看法。

请注意，此博客文章的早期版本描述了默认未启用的 Web Share API 的更新。还添加了对 WebM 支持和 WebAssembly 线程的额外澄清。