Safari 16.0 中的 WebKit 功能
今天，我们很高兴地宣布发布适用于 iOS 16、macOS Monterey 和 macOS Big Sur 的 Safari 16.0。此版本包含许多新的网络技术，网页开发者可以利用它们来进一步改进自己的网站和网页应用。
要在 macOS Monterey 和 macOS Big Sur 上更新到 Safari 16.0，请前往“系统偏好设置”→“软件更新”→“更多信息”。要在 iOS 上更新到 Safari 16.0，请安装 iOS 16。适用于 macOS Ventura 和 iPadOS 16 的 Safari 16 将于今年 10 月推出，并将包含 macOS Ventura 上的 网络推送。
我们在文章《WWDC22 新闻：Safari 16 Beta 中的 WebKit 功能》和 WWDC22 专题讲座《Safari 和 WebKit 的新功能》（32 分钟视频）中宣布了 Safari 16 的许多细节。但这些并非全部。自 WWDC 以来，我们又添加了更多功能。
Safari 16 Beta 1 以来的新增功能
适用于 iOS 16 的 Safari 包含对使用 AVIF 格式压缩的静态图像的支持。AVIF 由 开放媒体联盟 开发，是 JPEG、PNG、GIF 或 WebP 等图像格式的替代品。它提供多种色彩空间、无损和有损压缩等功能。对 AVIF 的支持也将在 10 月份来到 macOS Ventura 和 iPadOS。
WebKit 现在完全支持 resolution 媒体查询。此媒体查询为网页开发者提供了一种根据屏幕像素密度有条件地应用 CSS 的方法。例如：@media (min-resolution: 326dpi) { }。
WebKit 现在支持 text-align-last，这是一个 CSS 属性，用于设置文本块的最后一行如何对齐。例如，一个段落可以对大部分行应用 text-align: center，而该段落的最后一行则通过 text-align-last: right 右对齐。
WebKit 中的 :has() 伪类现在支持 :target。CSS :target 伪类会在元素具有与 URL 中的片段匹配的 id 时选择该元素。例如，如果用户点击一个链接，该链接将他们带到 example.com/#chapter2，并且该页面上的一个元素具有 ID #chapter2，那么 :target 伪类将选择该元素。在 Safari 16 中，:has(:target) 在使用带片段的 URL 时开辟了新的可能性。有关 :has 的深入了解，请阅读《将 :has() 用作 CSS 父选择器以及更多功能》。
通行密钥
iOS 16 上的 Safari 增加了对 通行密钥 的支持。它们为用户提供了极其简单的登录方式，同时显著提高了安全性。
实现通行密钥的技术定义在 FIDO 联盟 和 W3C 的开放标准中，包括 WebAuthn 标准，该标准已在浏览器中广泛支持。通行密钥是一项全行业努力，“通行密钥”是一个普通名词，任何人都可以使用。您可以将通行密钥与您现有的身份验证选项一起提供。首先，教导您的后端存储公钥并发出身份验证挑战。然后，在您的网站或网页应用上，通过采用创建新通行密钥和允许用户使用其通行密钥登录的 API，向用户提供通行密钥。
如果您的网站或网页应用已经支持使用 WebAuthn 的平台验证器，那么在添加通行密钥支持时需要注意几点。确保您没有将登录限制在保存通行密钥的设备上；也就是说，不要使用 cookie 来“记住”用户在特定设备上设置了密钥。此外，通过采用“条件中介”，确保您现有登录表单中的用户名字段与自动填充兼容。最后，开始提及通行密钥，并将其视为主要的登录方式。
要了解更多信息，请观看 WWDC22 专题讲座《认识通行密钥》（27 分钟视频）或阅读《支持通行密钥》。10 月，通行密钥支持将扩展到 macOS Monterey 和 macOS Big Sur，以及 macOS Ventura 和 iPadOS。
Apple Pay
Safari 16 增加了对 Apple Pay 商家令牌的支持，这是一种更有效地支持重复付款的方式，以及对多商家付款的支持，这是一种在一次交易中向多个记录商家付款的方式。Safari 16 还支持订单跟踪，使网络商家能够在 Wallet 中提供详细的订单和发货信息。Apple Pay 现在可以在所有 WKWebView 中使用。
网页检查器扩展
Safari 16 支持网页检查器扩展，使您能够增强 Safari 内置的网页开发者工具。在 macOS 上，您可以通过前往“Safari”>“Safari 扩展”并在 App Store 中查找网页检查器扩展来下载这些扩展。搜索您最喜欢的第三方开发者服务、测试套件和框架（包括最近宣布支持的 Angular DevTools）中的开发者工具。如果您想学习如何制作此类扩展，请观看 WWDC22 专题讲座《创建 Safari 网页检查器扩展》（18 分钟视频）。
Safari 16 包含了更多 Safari 网页扩展功能，包括在 iOS、iPadOS 和 macOS 之间同步已启用扩展的能力。Safari 16 同时支持 manifest version 2 和 manifest version 3。观看 WWDC22 的《Safari 网页扩展新功能》以了解差异以及如何升级您的扩展。Safari 16 中的网页扩展还增加了对 declarativeNetRequestWithHostAccess 权限和 browser.runtime.getFrameID 的支持。
容器查询
与媒体查询类似，容器查询允许您根据容器的大小而不是视口的大小调整网页上特定项目的布局或样式。Safari 16 支持大小查询和容器查询单位。“大小查询”是网页开发者在谈论容器查询时所想象的——即编写仅在容器达到特定大小时才适用的 CSS 的机会。容器查询单位类似于视口单位，但它们指定相对于查询容器尺寸而不是视口的长度。这些单位包括 cqw、cqh、cqi、cqb、cqmin 和 cqmax。
子网格
CSS Grid 彻底改变了网页布局设计的可能性。子网格将 Grid 提升到另一个层次，提供了一种简单的方式将网格容器的孙子元素放置到该网格上。它使得在复杂布局中对齐项目成为可能，而不受 HTML 结构的限制。而 Safari 的网格检查器允许您打开任意数量网格的覆盖层——这在编写子网格代码时特别有用。
网页检查器
继去年增加了网格检查器之后，Safari 16.0 又增加了弹性盒检查器。它与 Safari 15.4 中对齐编辑器的加入完美结合。
Safari 的弹性盒检查器在视觉上区分了多余的自由空间和弹性间隙。它还显示了项目的边界，揭示了它们在弹性盒容器的主轴和交叉轴上如何分布。可切换的“顺序号”选项显示容器中元素的布局顺序，这在使用 order 属性时会很有帮助。就像我们去年为网格提供的覆盖层一样，您可以同时显示任意数量的弹性盒覆盖层，而不会影响滚动性能。一个复选框即可将其全部打开。
在“时间线”选项卡中，有更多指向参考文档的链接，以及一个新的实验性“屏幕截图”时间线，用于在内容更改被渲染时捕获视口的屏幕截图。
“元素”选项卡现在支持在“样式”侧边栏中显示容器查询。
“源代码”选项卡带来了新的改进，包括允许本地覆盖请求在重定向 URL 中使用正则表达式匹配，以及本地覆盖响应现在可以映射到磁盘上的文件。
“网络”选项卡包含一个新的代理指示器，并提供了一种完全阻止网络请求的方法。
辅助功能改进
Safari 16 重新架构了 WebKit 在 macOS 上的辅助功能支持。通过添加隔离树模式，WebKit 将辅助功能工作卸载到辅助线程，减少了 VoiceOver 的挂起，提高了性能并增加了响应能力。这一改变使得 WebKit 能够以比以前更短的时间处理来自 VoiceOver 等客户端的更多辅助功能请求。在一些复杂的网页上，我们测量到辅助功能请求的处理数量增加了两倍，而所需时间减少了 25%。Safari 16 还通过确保带有 display:contents 的元素在辅助功能树中得到正确表示，大大改进了对它们的辅助功能支持。
动画改进
WebKit 现在支持 CSS 偏移路径（也称为运动路径），使网页开发者能够沿着任何形状的自定义路径动画对象。offset-path 属性允许您定义一个几何路径来动画。offset-anchor、offset-distance、offset-position 和 offset-rotate 属性为您提供了额外的能力来精确调整动画对象的运动。而 offset 属性则作为组合这些属性的简写。
在 Safari 16 中，您现在可以在 CSS Grid 中动画轨道大小，动态改变行和列的大小。
Safari 16 还增加了对 合成 操作的支持，解决了元素的动画如何影响其底层属性值的问题。它还增加了对 39 个 CSS 属性的离散动画支持。
滚动行为
CSS 滚动行为 决定了用户滚动并到达滚动区域边界时发生的情况。当您想阻止滚动链时它很有用——当用户在一个框内滚动并到达末尾时，您现在可以控制停止或允许页面其余部分的滚动。
共享工作器
WebKit 现在支持 共享工作器。它类似于 Service Workers，在后台运行 JavaScript，但其生命周期略有不同。您的共享工作器只要用户在您的域中打开任何选项卡，就会一直运行。所有打开到同一域的选项卡都可以共享同一个共享工作器。
附加功能
Safari 16 增加了对 Shadow Realms、<form>.requestSubmit()、HTML 输入元素的 showPicker() 方法以及 worker-src 内容安全策略指令的支持。
修复和完善
Safari 16.0 还包含许多错误修复和功能完善。
CSS
- 修复了带 alpha 的渐变颜色插值。
- 删除了大多数非标准 CSS 外观值。
- 完善了
:has()伪类的实现，更新以匹配不断发展的网络标准。 - 完善了级联层（Cascade Layers）的实现。
表单
- 修复了在表单使用
"_blank"目标提交后触发加载事件的问题。 - 修复了
contenteditable锚点卡在:active状态的问题。 - 修复了使用超出范围的值更改
stepUp()和stepDown()值的问题。 - 修复了当
min大于max时，将min用作<input type="range">的默认值的问题。 - 修复了使
<input type="email">的值更新可见的问题。 - 修复了确保在单选输入框的
keyup事件上移除:active的问题。 - 修复了
applyStep()行为以符合规范。 - 修复了
select()方法的返回值以符合规范。 - 修复了当存在
value属性时，<input type="image">生成的表单数据问题。 - 修复了
FormData对象不包含用于提交表单的提交按钮条目的问题。 - 修复了对于以
"."结尾的无效浮点数返回空字符串的问题。 - 修复了
<input>的type属性更改后的选择范围问题。 - 修复了选择范围受当前值长度限制的问题。
- 修复了用户代理样式表以包含
table { text-indent: initial }以符合规范。 - 修复了用户代理样式表以包含
box-sizing: border-box用于<input type="color">。 - 修复了
line-height声明为输入框的占位符使用!important的问题。
安全
- 修复了在对象元素中阻止图像内容的问题。
- 修复了 304 响应中不正确的 CORP/COEP 检查。
- 修复了混合
strict-dynamic和unsafe-inline策略的问题。 - 修复了 Workers 中的
script-src-elem策略。 - 修复了内联脚本和
strict-dynamic策略中不正确的blocked-uri。
WebGL 2
- 修复了处理
AllowSharedTypedArray的问题。
网页检查器
- 修复了在检查包含多行字符串的缩小源时，断点未触发、断点出现在脚本中的不正确位置以及错误/堆栈跟踪行/列号不正确的问题。
- 修复了导入时间线有时不滚动的问题。
- 修复了导入审计有时崩溃的问题。
- 修复了 CSS 自动完成建议最常用属性而不是按字母顺序排列的属性的问题。
网络驱动程序
- 修复了
pointerMove操作未正确触发鼠标事件的问题。 - 修复了快速会话创建和删除导致会话创建超时的问题。
Safari 网页扩展
- 修复了
getBytesInUse返回的计数不正确的问题。 - 请求
unlimitedStorage权限的扩展不再需要storage权限。 - 将静态规则集的最大数量更新为 50，已启用静态规则集的最大数量更新为 10。
- 服务工作器不再从
extension.getBackgroundPage和extension.getViews返回
反馈
我们期待您的反馈。请向 @webkit、@jensimmons 或 @jonathandavis 发送推文，分享您对 Safari 16 的看法。如果您遇到任何问题，欢迎您就 Safari 用户界面提出反馈，或提交关于网页技术或网页检查器的 WebKit 错误报告。提交问题确实有所帮助。
下载最新的 Safari 技术预览版，以保持在网页平台的前沿并使用最新的网页检查器功能。您还可以使用 WebKit 功能状态 页面来查看您最感兴趣的网页功能的新信息。
要了解有关 Safari 16 为网页开发者带来的更多信息，请阅读 Safari 16 发行说明。