Safari 16.5 中的 WebKit 特性

2023 年 5 月 18 日

作者：Jen Simmons

今天我们很高兴分享 Safari 16.5 中 WebKit 的新特性。

在发布了包含大量面向 Web 开发者功能的 Safari 16.4 之后，此版本主要侧重于完善现有功能和修复 Bug。Safari 16.5 确实包含了一些新功能，包括 CSS Nesting、:user-valid 和 :user-invalid、对 Apple Pay 预购和延期付款的支持，以及对锁定模式 (Lockdown Mode) 的更新。

CSS Nesting

Safari 16.5 包含了对 CSS Nesting（CSS 嵌套）的支持。作为预处理器中长期以来备受喜爱的一项功能，嵌套允许 Web 开发者编写如下代码

.foo {
  color: green;
 .bar {
    font-size: 1.4rem;
  }
}

在今天就试试 CSS 嵌套中，了解所有关于 CSS 嵌套的知识——包括当前限制，即在元素选择器（如 article）前不包含符号（如 &）就无法使用该选择器的情况。

CSS 工作组目前正在研究一个非常有前景的想法，旨在取消所有嵌套选择器必须以符号开头的要求。希望将来某一天，这一限制将不复存在。

CSS 用户有效和无效伪类

伪类 :user-valid 和 :user-invalid 现在已在 Safari 16.5 中得到支持。

多年来，:valid 和 :invalid 可以用于根据 input 字段或其他表单字段是否处于有效或无效状态来对其进行定位。但存在一个问题——一旦用户开始输入，内容就会被评估，如果不匹配则会被声明为无效。例如，当电子邮件地址的前半部分被输入，在 @ 符号出现之前，它就会被标记为 :invalid。这导致开发者在这种情况下转而使用 JavaScript。

新的 :user-invalid 和 :user-valid 伪类在触发时更加智能，从而消除了对 JS 的需求。在支持这些伪类的浏览器中，比较 :invalid 和 :user-invalid 即可看到差异。

在 Safari 16.5 或 Firefox 88 及更高版本中比较 :invalid 和 :user-invalid。

这些新的伪类在与 :has() 结合使用时特别有用，可以为页面上的任何元素（如表单字段的标签）提供强大的样式工具。

Apple Pay

网页版 Apple Pay 现在支持预购和延期付款。

锁定模式

锁定模式现在禁用了 WebCodecs API。

锁定模式是一种可选的、极端的保护措施，专为极少数可能因其身份或工作而成为最复杂数字威胁个人目标的个体设计。大多数人从不会成为此类攻击的目标。

Bug 修复

Safari 16.5 的 WebKit 提供了多项 Bug 修复和功能完善。

CSS

修复了“滚动到文本片段”有时在重新加载页面后滚动到顶部的问题。
修复了 calc() 中 x 分辨率单位的支持问题。
修复了计算样式中网格或弹性项目（grid or flex items）的 block-start、block-end、inline-start 和 inline-end 修剪边距的反映问题。
修复了在具有 block-end 边距修剪的块容器末尾，自折叠子元素的顶部偏移问题。
修复了更改 margin-trim 值时触发布局的问题。
修复了将 column-count 增加到 2 以上时布局未更新的问题。
修复了 CSS 自定义属性不适用于 SVG use 元素的影子树的问题。
修复了在通过 Tab 键切换或编辑选择器时，新的 CSS 属性意外地从空 CSS 规则中删除的问题。
将 -webkit-image-set() 设为 image-set() 的别名。

编辑和表单

修复了双向文本（bidi text）选择时的细线问题。
修复了照片库选择器在 accept="image/*" 时显示视频的问题。

JavaScript

更新了 Intl.DurationFormat 中的数字显示，以匹配规范更改。

布局

修复了双向文本（bidi text）在换行时的文本换行问题。

媒体

修复了非听觉 AudioContext 在停止捕获后阻止音频会话从播放和录制状态更改的问题。
修复了处理包含 CodecDelay 值导致视频播放开始时出现可听见的爆音的视频流的问题。
修复了在视频会议中通话期间移除 AirPods Pro 时视频冻结的问题。

滚动

修复了当使用物理鼠标滚轮进行滚动捕捉时，布局执行时捕捉到最后一个捕捉位置的问题。
修复了切换滚动捕捉开关时的捏合缩放问题。
修复了滑动到下一页时滚动捕捉跳回上一页的问题。
修复了滚动捕捉与鼠标上的物理滚轮配合使用的问题。

渲染

修复了表单控件的渲染问题。
修复了设置 position: absolute 时 content: counter() 的视觉更新问题。
修复了当 !important 样式覆盖动画值时，transform 动画出现意外可见的第一帧的问题。

Web API

修复了预检请求的元数据头填充问题。
修复了 OffscreenCanvas WebGL 触发上下文丢失事件的问题。
修复了 getFileHandle() 在遇到意外条目类型时返回 TypeMismatchError 的问题。

Web 应用

修复了通过链接打开 Web 应用时，“返回上一应用”按钮上显示“无标题”标签的问题。

Web Assembly

修复了 WASM SIMD 导致 WebP 解码应用崩溃的问题。

Web Inspector

添加了对 color-mix CSS 值的初步支持。
修复了元素 ::backdrop 规则在没有背景的情况下显示的问题。
修复了“选定元素”控制台条目占用一整行的问题。
修复了选择“检查元素”时迷你控制台总是打开的问题，即使之前已关闭。

反馈

我们期待您的反馈。发送推文给 @webkit，分享您对 Safari 16.5 的看法。您也可以在 Mastodon 上找到我们：@jensimmons@front-end.social 和 @jondavis@mastodon.social。如果您遇到任何问题，欢迎就 Safari UI 提交您的反馈，或提交关于 Web 技术或 Web Inspector 的 WebKit Bug 报告。提交问题确实能带来改变。

下载最新的 Safari 技术预览版，以保持在 Web 平台前沿并使用最新的 Web Inspector 功能。您还可以阅读 Safari 16.5 发布说明。

更新到 Safari 16.5

Safari 16.5 适用于 macOS Ventura、macOS Monterey、macOS Big Sur、iPadOS 16 和 iOS 16。在 macOS Monterey 或 macOS Big Sur 上更新 Safari 16.5，请前往“系统偏好设置”→“软件更新”→“更多信息”，然后选择更新 Safari。在 macOS Ventura、iOS 或 iPadOS 上更新，请前往“设置”→“通用”→“软件更新”。