Safari 13.1 中的新 WebKit 功能

2020 年 4 月 3 日

作者：Jon Davis

今年春季发布的 Safari 13.1 版本适用于 macOS Catalina、iPadOS、iOS 和 watchOS，为苹果各个平台上的 WebKit 带来了巨大的改进。所有这些更新还带来了更多的隐私、性能改进以及大量新的 Web 开发工具。

以下快速浏览这些版本中可用的新 WebKit 增强功能。

iPadOS 上的指针和鼠标事件

最新的 iPadOS 13.4 为 Safari 和 WebKit 带来了桌面级的指针和鼠标事件支持。为了确保最佳体验，Web 开发者可以使用功能检测并采用指针事件 (Pointer Events)。由于鼠标或触控板不会发送触摸事件，因此 Web 内容不应依赖触摸事件。指针事件将指定事件是由鼠标/触控板还是触摸生成的。

Web 动画 API

这些版本支持 Web 动画 API，这是一个 Web 标准，为开发者提供了一个 JavaScript API，用于创建、查询和控制动画，包括直接控制 CSS 动画和 CSS 过渡。它为程序化动画、CSS 动画和过渡提供了一个方便的统一模型。现在可以直接控制它们进行暂停、恢复、查找或改变速度和方向，减少了手动计算。此外，网页检查器 (Web Inspector) 也已更新，在媒体和动画时间轴中显示它们的条目。

Web Inspector Media and Animations Timeline

阅读更多关于 WebKit 中的 Web 动画 和 Safari 13.1 中的 Web 动画 的信息。

异步剪贴板 API

WebKit 在此版本的 Safari 中引入了异步剪贴板 API。它提供了对系统剪贴板和剪贴板操作的访问，同时保持网页的响应性。这个 API 比 DataTransfer 灵活得多，允许开发者为每个项目写入多种类型的多个项目。此外，它还在 macOS 和 iOS 上的所有网站中带来了程序化粘贴功能。

该实现可通过 navigator.clipboard API 获得，该 API 必须在用户手势事件处理程序（如 pointerdown 或 pointerup）中调用，并且仅适用于安全上下文（例如 https://）中提供的内容。与基于权限的读取剪贴板模型不同，当页面调用 clipboard API 时，会显示原生 UI；只有当用户明确与平台 UI 交互后，才能访问剪贴板。

有关更多详情，请参阅原始的 API 规范。

JavaScript 改进

这些版本包含了新的 JavaScript 支持，用于字符串的 replaceAll() 方法和新的空值合并运算符 (??)。

String.prototype.replaceAll() 方法正如其名，将字符串中给定值的所有出现都替换为替换字符串。

"too good to be true".replaceAll(" ", "-");
// too-good-to-be-true

从 String.prototype.replaceAll 提案 中了解更多。

空值合并运算符 (??) 是一个新运算符，只有当 ?? 左侧表达式的结果为 null 或 undefined 时，它才会评估并返回 ?? 右侧的表达式。

const nullValue = null;
const resultWithNull = nullValue ?? "default";        // "default"

const nonNullValue = 0;
const resultWithNonNull = nonNullValue ?? "default";  // 0

有关更多详情，请参阅 JavaScript 空值合并提案。

ResizeObserver

WebKit 中添加 ResizeObserver 使开发者能够设计响应容器而非仅视口大小的组件。这使得响应式设计更加灵活，容器可以对窗口大小变化、方向变化以及布局中新元素的添加做出反应。该 JavaScript API 避免了在 CSS 中尝试使用媒体查询来确定元素大小时产生的循环依赖问题。ResizeObserver 通过提供一种观察元素布局大小变化的方式来解决这个问题。

阅读更多关于 WebKit 中的 ResizeObserver 的信息。

HTML enterkeyhint 属性

在 iOS 上，WebKit 支持 enterkeyhint 属性，该属性允许内容作者为虚拟键盘上的回车键提供标签，可选值包括：enter, done, go, next, previous, search, 和 send。

更多信息请参阅 HTML 标准。

CSS Shadow Parts

对 CSS Shadow Parts 的新支持允许 Web 作者为 Web 组件的特定部分设置样式，而无需了解它们的构建方式。这提供了一种机制，可以定义作者定义的样式部分，类似于 WebKit 中输入元素的伪元素。

有关更多信息，请参阅 CSS Shadow Parts 规范。

更多 CSS 添加

WebKit 中有许多新的 CSS 添加。可以使用新的字体关键字来使用平台特定的字体，包括 ui-serif, ui-sans-serif, ui-monospace, 和 ui-rounded。WebKit 还支持 line-break: anywhere 值，该值在每个字符单元周围添加软换行机会，包括在任何标点符号或保留空格周围，即使在单词中间，甚至忽略换行限制。最后，WebKit 包括对 dynamic-range 媒体查询的支持，允许作者创建针对显示功能特定的样式。

@media (dynamic-range: standard) {
    .example {
        /* Styles for displays not capable of HDR. */
        color: rgb(255, 0, 0);
    }
}

@media (dynamic-range: high) {
    .example {
        /* Styles for displays capable of HDR. */
        color: color(display-p3 1 0 0);
    }
}

媒体 API

Safari 是第一个推出画中画功能的浏览器，并且长期以来一直支持为 AirPlay 指定播放目标。适用于 iOS 和 macOS 的 Safari 现在通过 画中画 API 和 远程播放 API 支持这些功能的标准化。此外，还新增了对 DataCue 中的 HLS 日期范围元数据 的支持。

字幕和隐藏式字幕

WebKit 正在引入 TextTrackCue 的增强功能，用于程序化字幕和隐藏式字幕的呈现。这使得视频发布者可以继续以旧版或自定义格式存储字幕，并通过程序化方式呈现它们，同时用户仍然能够通过系统辅助功能设置控制字幕的存在和样式。

有关更多详细信息，请参阅 WebKit TextTracks Explainer。

WebRTC 旧版音频和代理支持

WebKit 中的 WebRTC 支持已更新，以便它可以在更多地方、与更多系统一起工作。对 DTMF 的支持允许 WebKit 与旧版音频服务交互。WebRTC 代理支持允许 WebRTC 在防火墙可能禁止 UDP 并要求 TCP 通过专用代理的企业网络中工作。

性能改进

WebKit 在这些版本中继续在基准测试中取得性能提升，同时优化了内存使用。此版本在 Jetstream 2 基准测试中包括 8-10% 的改进。特别是在 JetStream 2 的 async-fs 基准测试中，JavaScript Promise 显示了 2 倍的改进。IndexedDB 在大多数操作中显示了比以前快 1.3 倍到 5 倍的改进。Service Worker 的启动也更快，CSS 媒体查询更新也更高效。改进的后退-前进响应性使历史导航感觉更流畅。此外，新的 Web Assembly 解释器将大型 WASM 应用的启动时间显著提高了约 8 倍。

安全改进

WebKit 通过修复通过模糊测试（fuzzing）过程发现的许多错误，继续加强安全性。继我们宣布弃用 TLS 1.0 和 TLS 1.1 连接后，此版本现在在连接到任何资源使用这两种已弃用的加密协议的网站时，会添加“不安全”警告。

智能跟踪预防更新

智能跟踪预防有几项新的增强功能，包括完全阻止第三方 Cookie，跨站 document.referrers 降级为其来源，以及在 Safari 使用七天且未与网站进行用户交互后，非 Cookie 网站数据将过期。

有关详细信息，请阅读博客文章“完全阻止第三方 Cookie 等”。

Web 平台质量改进

改进的标准合规性和浏览器互操作性方面包括更兼容的渐变和位置解析、颜色分量取整、对 Q 单位的新支持以及更好的 calc() 计算样式。

网页检查器更新

Safari 13.1 中的网页检查器包括新的调试体验，并添加了几个新工具，以帮助 Web 开发者测试功能或识别问题。

源选项卡

新的 源选项卡 将“资源”选项卡和“调试器”选项卡合并到一个视图中，将更多关键信息集中在一个地方，无需来回切换。改进之处包括改进了对 worker 调试的支持，并增加了新的 JavaScript 断点，例如在 所有事件 或 所有微任务 处暂停。

源选项卡中的新功能还包括，开发者可以使用导航侧边栏左下角的“+”按钮添加一个 检查器引导脚本 (Inspector Bootstrap Script) 或 本地覆盖 (Local Override)。检查器引导脚本是一段 JavaScript 代码，它保证在任何页面或子框架中创建任何新的全局对象后第一个被评估，无论 URL 如何，只要网页检查器 (Web Inspector) 处于打开状态。本地覆盖可以用于覆盖加载到页面中的任何资源，让开发者能够更改文件并在通常无法更改的页面上预览这些更改。

源选项卡和网络选项卡都受益于改进的 HTML 和 XML 内容显示，包括能够美化打印或将任何请求/响应数据作为模拟 DOM 树进行查看。

层选项卡

层选项卡在此版本中也新增可用。它提供了一个 3D 可视化和用于显示页面的所有渲染层的完整列表。它还包括层数和所有层的内存成本等信息，这两者都可以帮助开发者发现潜在的性能问题。

有关详细信息，请阅读博客文章“在网页检查器中可视化层”。

脚本黑箱

脚本黑箱 是另一个强大的工具，专注于帮助开发者调试基于 JavaScript 库或框架构建的行为。通过为任何库或框架脚本设置黑箱，调试器将忽略在该脚本中发生的任何暂停，而是延迟暂停，直到 JavaScript 执行继续到黑箱脚本之外的语句。

重新设计的颜色选择器

网页检查器的其他新增功能为内容作者提供了更多关于设计和用户体验的洞察。重新设计的颜色选择器采用方形设计，以实现更精确的颜色选择，并支持广色域颜色，通过白色导线显示 sRGB 到 Display-P3 色空间的边界。

从博客文章“CSS 中使用 Display-P3 的广色域颜色”中了解更多。

自定义 AR QuickLook

AR QuickLook Custom HTML Banner在 iOS 13.3 或更高版本的 Safari 中，用户可以从 Web 启动 AR 体验，内容作者可以在其中自定义叠加在 AR 视图上的横幅。可以自定义以下内容：

  • Apple Pay 按钮样式
  • 操作按钮标签
  • 项目标题
  • 项目副标题
  • 价格

或者，作者可以使用 HTML 创建完全自定义的横幅

https://example.com/example.usdz#custom=https://example.com/customBanner.html

有关更多信息，请阅读关于在 AR Quick Look 中添加 Apple Pay 按钮或自定义操作 的内容。

反馈

这些改进适用于运行 watchOS 6.2、iOS 和 iPadOS 13.4、macOS Catalina 10.15.4、macOS Mojave 10.14.6 和 macOS High Sierra 10.13.6 的用户。这些功能也已通过 Safari 技术预览版提供给 Web 开发者。Safari 此版本中的更改已包含在以下 Safari 技术预览版中：90、91、92、93、94、95、96、97、98。下载最新的 Safari 技术预览版，以了解未来 Web 平台和网页检查器功能的最新动态。您还可以使用 WebKit 功能状态 页面来关注您喜爱的 Web 平台功能的变化。

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