Safari 15.4 中的新 WebKit 功能

2022 年 3 月 14 日

作者：Jen Simmons 和 Jon Davis

Safari 15.4 在 WebKit 中增加了 70 多项内容，包含了新的 Web 技术、更新和修复。作为我们对 Web 开发者和 Web 使用者承诺的一部分，我们集结了一个重大版本。这是 2022 年 WebKit 的第一个重大发布，我们才刚刚开始。

Safari 15.4 适用于 macOS Monterey 12.3、macOS Big Sur、macOS Catalina、iPadOS 15.4 和 iOS 15.4。您可以通过前往“系统偏好设置”→“软件更新”→“更多信息”，然后选择更新 Safari，在 macOS Big Sur 和 macOS Catalina 上更新到 Safari 15.4。

HTML

让我们从 HTML 开始。WebKit 添加了对使用 <img> 元素的 loading 属性进行图片懒加载的支持，为 Web 开发者提供了一种简单的方式来指示浏览器延迟加载某些图片，直到用户滚动到靠近它们的位置。

经过多年关于可访问性考虑因素的标准化讨论，并最终找到解决方案后，WebKit 添加了对 <dialog> 元素和 ::backdrop 伪元素的支持。<dialog> 元素提供了一种强大且灵活的方式来创建叠加层和模态框。

<dialog id="confirmation-dialog">
    <h1>Do you want to delete everything?</h1>
    <p>You will lose all your data.</p>
    <button id="cancel-delete">Cancel</button>
    <button id="confirm-delete">Delete!</button>
</dialog>

::backdrop 伪元素使得样式化模态框下方的背景成为可能。

这是一个漂亮的对话框

样式化漂亮的对话框示例

您可以在《对话框元素介绍》中了解使用 <dialog> 和 ::backdrop 的所有内容。

WebKit 还添加了对全局 autofocus 属性的支持，允许开发者指示页面加载或显示 <dialog> 时应聚焦哪个元素。

CSS

CSS 架构功能

2022 年对 CSS 的几项补充为 Web 开发者提供了构建代码的革命性新方式，使得代码重用、设计系统创建以及与复杂应用程序集成变得更加容易。

首先在 Safari 中落地，WebKit 添加了对 :has() 伪类的支持。这个选择器满足了人们长期以来对“父选择器”的渴望——一种根据元素内容有条件地应用 CSS 规则的方式——并且它所带来的可能性远不止于此。长期以来人们认为这样的选择器是不可能的，但我们的团队找到了一个高度优化性能并提供灵活解决方案的方法，且不会拖慢页面速度。

WebKit 添加了对级联层（Cascade Layers）的支持——这是一种将样式组织到不同图层中的强大方式，在每个图层内部独立计算特异性。

a diagram of cascade layers, showing how Author layers cascade

Web 开发者可以创建一个“框架”层和一个“自定义”层——将所有第三方框架的 CSS 分配到“框架”层，并在“自定义”层中编写自己的代码。他们可以指定自定义层中的所有内容应覆盖框架层中的所有内容，无论每个层中使用的选择器的特异性如何。级联层几乎同时在所有主要浏览器中推出，并包含在 Interop 2022 中，确保 Web 开发者可以开始认真考虑在未来使用这个工具。

WebKit 还添加了对CSS Containment的支持——包括所有四种类型：size、layout、style 和 paint——通过 contain 属性实现。

解决痛点

WebKit 中对 CSS 的几项补充引入了解决长期痛点的方案。

Web 开发者经常寻求一种与现有视口单位类似但在移动设备上表现更好的工具，因为在移动设备上浏览器的视口尺寸会随着用户滚动页面而改变。新的视口单位（Viewport Units）就是这个解决方案。100svh 指的是最小可能视口高度的 100%。100lvh 指的是最大可能视口高度的 100%。而 100dvh 指的是动态视口高度的 100%——这意味着该值会随着用户滚动而改变。

100svh measures the smallest viewport, top to bottom. 100lvh measures the largest viewport. 100dvh measures the dynamic viewport, changing as the user scrolls.

还有其他新的视口单位——svw、lvw 和 dvw 用于宽度，作用相同。为了涵盖 vmin 和 vmax 的小、大和动态版本，实现了 svmin、svmax、lvmin、lvmax、dvmin 和 dvmax 单位。为了支持逻辑尺寸，新的 vi 和 vb 与现有视口单位类似，用于视口的内联和块尺寸。而 svi、svb、lvi、lvb、dvi 和 dvb 为内联和块尺寸的小、大和动态版本提供了逻辑尺寸单位。WebKit 很高兴能率先推出，首先发布这些新单位，并通过 Interop 2022 鼓励其他浏览器也这样做。

WebKit 添加了对 :focus-visible 伪类的支持，仅在浏览器渲染焦点指示器时对其进行样式设置。通过阅读《焦点指示伪类 :focus-visible》了解更多信息。

为了使原生表单控件更具可定制性，accent-color 属性提供了一种方式，让 Web 开发者可以改变表单控件 UI 特定部分的颜色。在 macOS、iPadOS 和 iOS 上，accent-color 支持 <input type="checkbox">、<input type="radio">、<progress>、<select> 以及带有 <datalist> 的文本输入类型。此外，在 iPadOS 和 iOS 上，accent-color 支持 <input type="range">、<button> 和 <input type="button">。

WebKit 修复了一个带有 alpha 透明度的颜色之间的插值错误——从而改进了渐变支持。

How a gradient looks before & after this fix. Without the fix, the color is muddy.

WebKit 添加了对calc() 数学函数的支持，包括 sin、cos、tan、e、pi、exp、log、atan、acos、asin 和 atan2。

排版

Safari 15.4 中的几项新的 WebKit 功能丰富了 Web 排版的可能性。

WebKit 添加了对 font-palette CSS 属性和 @font-palette-values 规则的支持。font-palette 属性为 Web 开发者提供了一种选择颜色字体内部预定义的不同颜色调色板的方式——例如，声明字体的深色调色板用于网站的深色模式设计。@font-palette-values 规则为 Web 开发者提供了一种定义自己的自定义颜色调色板以重新着色颜色字体的方式。

four versions of a drop cap, in orange, purple, yellow, and black.
用于放大写字母的颜色字体是 Bradley Initials DJR Web，此处显示了其默认调色板、由 Web 开发者创建的自定义调色板、字体中包含的替代调色板，以及用户偏好移除颜色后的效果。

WebKit 添加了对 text-decoration-skip-ink 的支持，用于控制下划线和上划线在经过字形升部和降部时如何渲染。WebKit 之前通过 text-decoration-skip 支持此排版功能，但由于其他浏览器尚未支持此简写属性，WebKit 对长写属性的支持将使得关闭下划线和上划线的油墨跳跃（ink skipping）变得更容易。

WebKit 添加了对 ic 单位的支持，这在排版 CJK 脚本时非常有用。就像 ch 单位等同于字体中 0 字形的宽度（或高度，取决于内联方向）一样，ic 单位等同于元素当前字体中“水”字形的内联方向长度（宽度或高度）。

弃用 WebKit 前缀

为了持续努力减少对前缀的依赖，WebKit 新增支持了一些之前仅以旧形式提供的 CSS 属性和值。带前缀的版本仍将工作，现在已作为无前缀版本的别名。Safari 15.4 添加了对以下内容的支持：

  • appearance，包括 appearance: auto
  • mask，以及长写形式 mask-image、mask-size、mask-repeat-x、mask-repeat-y、mask-origin
  • backface-visibility
  • text-combine-upright
  • print-color-adjust
  • text-align 属性的 match-parent CSS 值

WebKit 还移除了非标准 CSS 属性 -webkit-border-fit、-webkit-margin-collapse、-webkit-margin-top-collapse、-webkit-margin-bottom-collapse、-webkit-margin-before-collapse、-webkit-margin-after-collapse 和 -webkit-background-composite。

Web API

此版本包括 WebKit 中 Web API 的多项升级，以帮助 Web 开发者提供更好的用户体验。

新增对 BroadcastChannel 的支持，允许来自同一源的标签页、窗口、iframe 和 Worker 之间互相发送消息。这使得跨多个标签页同步网站登录状态等体验成为可能。

WebKit 中支持的另一个新机制是 Web Locks API，用于从同一源在标签页、窗口、iframe 和 Worker 中作为异步锁定控制管理对资源的访问。

开发者还可以使用 CSS scroll-behavior 属性或 JavaScript 中 window.scroll()、window.scrollTo() 和 window.scrollBy() 方法中的 behavior 选项来控制元素的滚动行为。这项新支持使开发者能够选择立即跳转到视口中的某个位置或平滑地动画滚动操作。

ResizeObserver API 更新了对 ResizeObserverEntry 使用的 ResizeObserverSize 接口的支持，以帮助开发者观察元素盒模型属性的变化。

添加了 structuredClone(value)，提供了一个实用工具，它使用结构化克隆算法同步执行深拷贝，以克隆和传输输入值中的对象。

WebKit 对带有 Origin Private File System 的 File System Access API 的支持首先在 Safari 15.2 中发布。此版本在 FileSystemFileHandle 中引入了 getFile() 方法，使得从文件系统中读取文件更加方便。此外，WebKit 更新了 WriteableStream 以与 File System Access API 协同工作。欲了解更多信息，请阅读《带有 Origin Private File System 的 File System Access API》。

JavaScript

JavaScript 的新功能和更新为开发者带来了额外的便利。实用的新 Array 功能使得从数组末尾开始搜索更加方便，可以使用 findLast() 和 findLastIndex() 方法。这些方法帮助开发者避免了通常需要先使用 reverse() 方法来改变数组的传统方法。

还支持 at() 方法，用于访问指定整数索引处的条目，值得注意的是，它支持使用负整数从数组末尾开始访问。

let list = ['banana','cherry','orange','apple','kiwi'];

// Instead of this:
console.log(list[list.length-2]);

// It's as easy as:
console.log(list.at(-2));

新的语言实用工具 Object.hasOwn() 简化了检测对象自身是否拥有某个属性（即非继承属性或不存在的属性）的过程。

国际化

随着标准化流程定义了更多的国际化功能，WebKit 继续对其 Intl 实现进行定期更新。此版本包括通过 Intl Enumeration API 识别本地时区、排序规则、日历、数字系统和货币的受支持值。

Intl.Locale 更新至 V2，公开了新的信息，包括日历周数据（如一周的第一天）、文本信息（如书写方向）以及其他地区相关的默认设置（如日历、12 或 24 小时制、数字系统）。

WebKit 还将 Intl.DisplayNames 更新至 V2，增加了对 calendar 和 dateTimeField 名称以及 languageDisplay 选项的支持。

添加到 Intl.PluralRules 的 selectRange() 方法为范围提供了区域设置正确的复数形式（例如 0-1 项）。Intl.NumberFormat V3 更新增加了 formatRange() 和 formatRangeToParts() 方法，用于使用区域设置感知约定格式化数字范围，并提供了新的 useGrouping、roundingPriority、roundingIncrement、trailingZeroDisplay 和 signDisplay 选项。

最后，Intl.DateTimeFormat 支持四种新的 timeZoneName 选项：shortOffset、longOffset、shortGeneric 和 longGeneric。

Web 应用

Web App Manifest 和 ServiceWorker 收到了更新，这些更新改善了 Safari 中的网站以及保存到 iOS 和 iPadOS 主屏幕的 Web 应用的用户体验。

Web App Manifest 的改进包括确保浏览器始终在页面加载期间获取清单文件，而不是在用户从共享菜单中选择“添加到主屏幕”时获取。这种方法提高了可靠性，也允许清单文件定义网页在 Safari 中的特性。

此外，现在支持在 Web 应用清单文件中声明图标。当 HTML 头部没有定义 apple-touch-icon 时，以及当用于声明图标的清单文件代码省略 "purpose" 键或包含 "purpose": "any" 时，Safari 和 iOS 会使用清单中声明的图标。使用 apple-touch-icon 定义图标优先于清单中声明的图标，以便为使用此技术为 iOS 定义特定图标（与其他移动平台不同）的 Web 应用提供一致的行为。

开发者现在可以在 ServiceWorker 中启用导航预加载（Navigation Preload），以提高加载性能并避免 ServiceWorker 启动延迟阻塞网络请求。还新增支持允许用户下载由 ServiceWorker 生成的文件。WebKit 还提高了通过 ServiceWorker 使用带有文件 FormData 的 Fetch 的可靠性。

媒体

WebRTC 协商 API 现在完全符合 WebRTC 1.0 规范，支持 WebRTC 完美协商（perfect negotiation）。这是一种解决两个远程对等端在协商过程中可能出现的潜在同步问题的方法。

WebKit 添加了对音视频的带内章节轨道（in-band chapter tracks）的支持。带内文本轨道将字幕或章节标记信息提供在媒体容器本身内部，而不是在 HTML 中声明或用 JavaScript 注入。以前已经支持 CEA-608 等带内字幕轨道。现在，也支持带内章节轨道，其中“提示（cue）”表示章节的开始时间和标题。

WebKit 添加了对 <video> 上的 requestVideoFrameCallback() 的支持，这使得调用者可以在有新的视频帧可用于显示时收到通知，并提供了关于该帧的元数据。

隐私

继续我们对隐私的承诺，并进一步推进我们提出的以保护隐私的方式衡量广告的 Web 标准，Safari 15.4 为 Private Click Measurement 提供了三项更新：

  • 增加了通过在商家网站上触发事件的不可链接令牌来防止转化欺诈。
  • 增加了对商家网站上同站点转化像素的支持，以消除对跨站点像素的依赖。
  • 允许衡量发布商网站上嵌套的跨站点 iframe 中的链接。

安全

Safari 15.4 中的 WebKit 改进了对 Content Security Policy Level 3 的支持，提供了对内容加载的增强安全控制，并帮助 Web 开发者减轻跨站脚本攻击和其他漏洞的风险。内联脚本、内联样式和 eval 执行的被阻止资源违规报告已更新，以符合 Web 标准。新增对 'strict-dynamic'、'unsafe-hashes' 和 'report-sample' 源表达式的支持，为开发者提供了更大的灵活性。开发者还可以使用新的哈希源表达式支持，安全地在其页面中包含外部 JavaScript。

此版本还移除了对 XSS Auditor 的支持，它已被 CSP 和 COEP 等现代跨域防御机制取代。

WKWebView

使用 WKWebView 的开发者，包括 iOS 和 iPadOS 上的第三方浏览器，可以利用新的 WKPreferences 进行额外的用户体验控制。iOS、iPadOS 和 macOS 上的应用现在可以控制允许或阻止 Web 内容使用 全屏 API（Fullscreen API）。另一个新偏好设置允许启用或禁用特定站点的怪异模式（site-specific quirks），这是一组旨在提高 Web 兼容性的特定站点行为。

在 iPadOS 上，使用 Media Source Extensions 的 Web 内容现在可以在 WKWebView 中工作。

Safari Web 扩展

在我们持续致力于实现跨浏览器扩展互操作模型的努力中，Safari 15.4 增加了对 Web Extensions 的支持，包括对 manifest_version 3 及相关 API 变更的支持。新增功能包括：

  • service_worker 后台脚本，作为非持久化后台页面的替代方案。
  • 通过 browser.scripting API 进行脚本和样式注入。
  • 通过 browser.declarativeNetRequest API 进行动态和会话规则设置。
  • 使用 externally_connectable:matches 进行网页到扩展的消息传递。

并解决了几个问题，包括：

  • 现在对扩展同步存储的大小和项目数量强制执行限制。
  • 现在允许在扩展清单的 content_security_policy 中包含更多指令，例如 sandbox 指令。
  • 现在处理 declarativeNetRequest 规则的 urlFilter 中的特殊匹配字符（*、|、|| 和 ^），而不是将其视为正则表达式模式。
  • 现在允许从 runtime.onMessage 监听器返回 Promise 作为消息回复。

Web Inspector

Web Inspector 的更新提供了用于在“样式”面板中处理 CSS 的实用新工具，包括对级联层（Cascade Layers）和新的 @layer 规则集的直观支持，使得轻松识别规则定义在哪个层中成为可能。

在使用 Flexbox 和 Grid 的 align-content、align-items、align-self、justify-content、justify-items 或 justify-self 时，还有新的 CSS 对齐控制，用于直观地识别和选择理想值。

在“样式”面板中添加新属性或值时，Web Inspector 提供方便的自动补全选项。此版本将自动补全升级为使用模糊匹配，使得找到正确的选项变得更加容易。

在使用 CSS 自定义属性（或更广为人知的 CSS 变量）时，常见的做法是将其添加到 :root 或 html 的选择器规则中。不幸的是，这会导致页面上每个元素都继承一大堆 CSS 变量。Web Inspector 通过几种方式帮助您处理这个问题。首先，它会自动隐藏未使用的继承 CSS 变量。然后，当您需要查看它们时，会有一个按钮来显示所有变量。您还可以使用过滤工具搜索正确的 CSS 变量。或者，您可以在“计算属性”面板中按值类型分组查看所有适用的 CSS 变量，这样您就可以折叠与您的任务无关的组。

适用的 CSS 变量列表可以按值类型分组到可折叠的子部分：颜色、尺寸和其他类型。

通过阅读《使用 Web Inspector 管理 CSS 变量》了解更多信息。

反馈

我们很高兴听到您的声音。向 @webkit、@jensimmons 或 @jonathandavis 发送推文，分享您对此版本的看法。Safari 15.4 中的哪项技术最让您兴奋？您接下来想看到哪些功能或修复？如果您遇到任何问题，我们欢迎您就 Safari UI 提供反馈，或提交关于 Web 技术的 WebKit 错误报告。提交问题确实会带来改变。

下载最新的Safari Technology Preview，以保持在 Web 平台的最前沿，并使用最新的 Web Inspector 功能。您还可以使用WebKit 功能状态页面，关注您最感兴趣的 Web 功能的最新信息。

更多内容

要查看 Safari 15.4 中 WebKit 的完整内容列表，包括额外的错误修复，请阅读 Safari 15.4 发布说明。

这些功能首先在 Safari Technology Preview 中发布：130、131、132、133、134、135、136、137、138 和 139。