Safari 12.1 中的 WebKit 新功能

2019年4月5日

作者：Jon Davis

随着 Safari 12.1 的发布（包含在 macOS Mojave 10.14.4 和 iOS 12.2 中），WebKit 带来了许多改进和新的 Web 平台功能。此次发布提供了改善网站与操作系统集成的 Web 平台功能、新的实时通信能力、更兼容的加密媒体支持，以及帮助开发者减少 polyfills 使用需求的功能。Safari 在提供所有这些功能的同时，还改善了用户隐私、JavaScript 性能、响应能力、稳定性和安全性。

本文将快速浏览 Safari 12.1 为 Web 带来的改进和新功能。要了解更多关于 Safari 12.1 的信息，包括 Safari 本身的变化，请阅读Safari 12.1 发布说明。

网页暗黑模式

有关 WebKit 暗黑模式的最新指南，包括 iOS 13 和 macOS Catalina 的更改，请阅读我们的WebKit 中的暗黑模式支持文章。

随着用户可以选择亮色或暗色配色方案，网站可能会显得格格不入，甚至更糟，变得刺眼和令人痛苦。为了帮助网站更好地与 macOS Mojave 中的暗色外观设置集成，WebKit 提供了 supported-color-schemes 属性和 prefers-color-scheme 媒体查询，允许网页支持亮色和暗色配色方案。

Web 内容作者可以使用 @media(prefers-color-scheme: dark) 媒体查询来提供覆盖默认亮色主题的暗黑模式样式。或者，也可以使用 @media(prefers-color-scheme: light) 来提供覆盖默认暗黑主题的亮色样式。

如果您正在 macOS Mojave 版 Safari 12.1 中阅读此文，您可以在“系统偏好设置 → 通用”中切换暗黑模式以查看 webkit.org 本身提供了亮色和暗色配色方案。

网页检查器也得到了改进，在“元素”标签中新增了一个切换按钮，可以轻松地在亮色和暗黑模式之间切换。这有助于开发者测试两种配色方案，而无需切换整个系统。

智能跟踪预防

智能跟踪预防的更新对 Cookie 增加了新的限制，进一步减少了隐藏的第三方在用户访问的网站之间进行跟踪的能力。为此，对于被智能跟踪预防识别为具有跨站跟踪功能的域名，移除了对分区 Cookie 的支持。更进一步，智能跟踪预防现在还限制了 JavaScript 第一方 Cookie 的长期跟踪。

在“智能跟踪预防 2.1”博客文章中阅读更多关于这些变化的信息。

支付请求 API

支付请求 API 已更新，增加了细粒度错误、支持在“钱包与 Apple Pay”设置中配置的默认地址和联系人，以及对日本的特殊字段支持。这些更改现在使支付请求 API 与 Apple Pay JS 支付系统保持一致，同时拥有 Web 标准兼容性的所有优势。支付请求现在是实现 Web 版 Apple Pay 的推荐方式。

更多详情，请参阅支付请求 API 规范。

WebRTC 改进

WebRTC 的主要改进包括支持视频同播和 VP8 视频编解码器。视频同播支持一种技术，用于以不同的参数（如帧大小或比特率）编码视频内容，通过中央服务器将相同内容提供给多个客户端。WebKit 对 VP8 视频编解码器的支持仅在 WebRTC 中可用。该编解码器提高了网站兼容性，允许与更广泛的 WebRTC 端点进行视频交换。由于 H.264 在 Apple 硬件上具有硬件支持并已针对电源效率进行调整，WebKit 继续将 H.264 作为其在 WebRTC 中的默认编解码器，以提供更好的用户体验。

有关 WebKit 中这些 WebRTC 改进的更多详细信息，请参阅博客文章“通向 WebRTC 1.0 之路，包括 VP8”。

现代加密媒体扩展 API

WebKit 更新了加密媒体扩展 (EME) API 的实现，用于提供加密视频或音频内容。此更新版本也不再使用 webkit- 前缀。现代 EME 实现包含原始带前缀 API 中没有的许多 Web 开发者功能和便利。鼓励开发者使用功能检测来确定 API 的带前缀版本或无前缀版本是否可用，以确保与旧版本的兼容性。

有关更多信息，请参阅加密媒体扩展标准规范。

在 MSE 中更改编解码器和容器

WebKit 自 Safari 8 以来在 macOS 上支持媒体源扩展 (Media Source Extensions)。它提供了基于 Web 的音频和视频媒体内容流式传输。通过 MSE，媒体流可以由 JavaScript 创建和控制。此版本中的新功能是，WebKit 现在支持使用 SourceBuffer 上的新 changeType() 方法来转换编解码器或字节流容器。这意味着开发者可以在单个 SourceBuffer 内动态切换编解码器和容器，而不是在多个 MediaSource 实例之间切换，后者可能会导致明显的转换延迟。

在媒体源扩展编解码器切换功能孵化规范中了解更多关于 changeType() 方法的信息。

交叉观察器

交叉观察器 API 为开发者提供了一种方法，可以知道页面上的特定元素何时可见。这使得开发者能够避免耗费电池的昂贵轮询技术，该技术会定期计算元素相对于另一个元素或视口的位置。这使得诸如延迟加载图像等网站行为的实现更具能源效率，并且也适用于跨源内容。

您可以通过阅读“WebKit 中的 IntersectionObserver”博客文章了解更多信息。

Web Share API

Web Share API 添加了 navigator.share()，这是一个基于 Promise 的 API，开发者可以使用它来调用主机操作系统提供的原生共享对话框。这允许用户将文本、链接和其他内容共享到他们选择的任意目的地，例如应用程序或联系人。

navigator.share({
    title: document.title,
    text: "The WebKit Blog",
    url: "https://webkit.ac.cn/blog"
});

从Web Share API 规范了解更多信息。

颜色输入

WebKit 增加了对 <input type="color"> 的支持，这是一种表单控件，使用原生平台 UI 允许用户选择颜色作为输入值。元素的值是以七个字符的十六进制格式指定的 RGB 颜色。

此输入的可用性意味着开发者不再需要在 Safari 中开发或维护自定义代码来提供网站上的颜色选择功能。

在HTML Living Standard中阅读更多关于颜色输入的信息。

数据列表

WebKit 中另一个新支持的元素是 <datalist> 元素。<datalist> 元素包含一个 <option> 元素列表，为 <input> 元素提供建议值。<datalist> 的典型用途是为文本输入提供自动完成功能。它也可以用于其他类型的输入，例如 search、tel、url、email、date、month、week、time、datetime-local 和 number。要将 <input> 连接到 <datalist>，请在 <input> 元素上添加一个 list 属性，指定 <datalist> 的 id 属性。

选择恒星系统

<label for="star-system-chooser">Select star system: </label><input id="star-system-chooser" list="star-system-options" type="text" name="star-system-choice">
<datalist id="star-system-options">
    <option>Polaris</option>
    <option>Alpha Centauri</option>
    <option>Nysa</option>
    <option>Arcturus</option>
    <option>40 Eridani A</option>
    <option>Raxxla</option>
</datalist>

对 <datalist> 的支持还有助于开发者减少为提供此功能而开发和维护的自定义代码量。

从HTML Living Standard了解更多关于数据列表的信息。

更好的文本装饰

对两个新文本装饰属性的支持使 Web 作者能够更好地控制其文本内容的外观。

text-underline-offset 允许在基线下方特定位置放置下划线。text-decoration-thickness 属性使用长度值指定粗细——一个数字后跟一个单位（例如 1px 或 0.5em）。这里更推荐在这两个属性中使用 em 单位而不是绝对长度，这样线条粗细和偏移量可以随字体大小缩放。您还可以将 from-font 指定给这两个属性，这将从所使用的字体文件本身提取相关度量。

网页检查器改进

为了帮助开发者实现更高效的编辑和调试工作流程，网页检查器已得到改进，支持多个关键区域的多选，包括 DOM 树节点、Cookies 表中的条目以及“样式”侧边栏中的样式规则。

Web Inspector Storage Tab Cookies Table with multiple selections in light mode

Web Inspector Storage Tab Cookies Table with multiple selections in dark mode

“网络”选项卡现在为所有加载的资源提供安全信息。在“网络”选项卡中选择资源时，会显示资源预览面板。单击“安全”选项卡将提供安全详细信息，包括一个按钮以显示响应中发送的证书。

Web Inspector Network Tab resource security certificate in light mode

Web Inspector Network Tab resource security certificate in dark mode

网页检查器还提供了新的媒体调试工具，以帮助开发处理媒体内容的 Web 应用程序。现在，“网络”选项卡包含媒体请求，这些请求可以分组以便更轻松地查看相关请求。网络加载时间线还显示了分组请求的新标记，单击时会显示一个带有事件计时详细信息的弹出窗口。

在“时间线”选项卡中，开发者可以添加新的媒体时间线，以查看可以与代码关联的媒体事件。这些媒体事件还包括进入或退出特殊低功耗视频播放模式时的特殊事件。开发者可以通过设置全屏视频以实现低功耗播放来帮助用户节省电池寿命。这需要在黑色背景上以全屏播放视频，视频上没有其他覆盖元素。在这种设置下，当用户在最近的 MacBook Pro 硬件上，在电池供电且没有外部显示器的情况下全屏播放视频时，视频会以未经转换的格式呈现，从而节省电量。这对于用户在播放长时间视频内容时节省大量电池寿命特别有用。

反馈

所有这些改进都适用于运行 iOS 12.2 和 macOS Mojave 10.14.4 的用户，其中大多数也适用于 macOS High Sierra 和 macOS Sierra。这些功能也通过 Safari 技术预览版发布提供给 Web 开发者。Safari 此版本中的更改包含在以下 Safari 技术预览版中：59、60、61、62、63、64、65、66、67、68、69、70、71、72、73、74、75、76。下载最新的 Safari 技术预览版以站在未来 Web 功能的前沿。您还可以使用 WebKit 功能状态页面来关注您最喜爱的 Web 平台功能的变化。

我们乐于倾听您的意见。发送推文给 @webkit 或 @jonathandavis，分享您对本次发布的看法，以及您希望但未包含的任何功能。如果您遇到任何问题，欢迎提交 Safari 的错误报告，或提交 Web 内容问题的WebKit 错误。