WWDC22 新闻
Safari 16 Beta 版中的 WebKit 功能

目录

• 网页检查器扩展
• 容器查询
• 适用于 macOS 的网页推送
• 子网格
• Flexbox 检查器
• 辅助功能改进
• 动画改进
• 超出滚动行为
• 共享 Worker
• 更多内容
• 反馈

WebKit 度过了重要的一年，在 WebKit 浏览器中推出了超过 162 项新功能和改进，包括 Safari 15.2、Safari 15.4 和 Safari 15.5。今年早些时候发布的功能包括 dialog 元素、延迟加载、inert、:has() 伪类、新的视口单位、级联层、focus-visible、强调色、外观、彩色字体的字体调色板、BroadcastChannel、Web Locks API、File System Access API、WebAssembly 增强功能、canvas 中对 Display-P3 的支持、COOP 和 COEP 的补充、网页检查器中改进的 CSS 自动补全和新的 CSS 变量工具，以及更多、更多内容。

我们很高兴今天宣布 Safari 16 Beta 版中即将推出的主要 Web 技术。

您可以通过下载 Safari 16.0 公开 Beta 版，在 macOS Monterey 或 macOS Big Sur 上试用 Safari 16。您需要使用免费的 Apple ID 登录才能下载。请注意，安装 Safari 16 Beta 版将替换您现有的 Safari 安装，并且无法恢复到早期版本。

或者，如果您愿意，可以通过安装 macOS Ventura、iOS 16 或 iPadOS 16 的公开 Beta 版来测试 Safari 16。

网页检查器扩展

Safari 16 带来了对网页检查器扩展的支持，因此您可以增强 Safari 内置的浏览器开发者工具。这在使用强大的第三方框架和服务时特别有用——也许您的团队使用 React、Angular、Vue 或 Ember；或者是一个流行的测试套件或其他开发者服务。现在，借助 Safari 网页检查器扩展，您将能够安装来自这些框架和服务的开发者工具扩展，从而更快、更轻松地进行开发。今秋敬请在 App Store 中寻找此类扩展。

针对流行第三方框架和服务的扩展并不是网页检查器扩展唯一令人兴奋的用途。通常，开发者工具的小改进就能对工作流程产生巨大影响。您可能就是最适合构想和创建此类扩展的人。Web 扩展由 HTML、CSS 和 JS 构成——对于 Web 开发者来说是一个完美的项目。要了解构建 Safari Web 扩展的基础知识，无论是从快速入门模板开始，还是通过转换现有扩展以使其与 Safari 兼容，以及如何将其打包到 App Store，请观看技术讲座 构建和部署 Safari 扩展。

Safari 网页检查器扩展使用与其他浏览器中的开发者工具扩展相同的 JavaScript API 构建。这使得您喜爱的开发者工具扩展的创建者能够轻松地将其移植到 Safari。

网页检查器扩展加入了 Safari Web 扩展的其他改进，包括能够在 iOS、iPadOS 和 macOS 之间同步已启用的扩展。

容器查询

经过多年在不同浏览器上工作的工程师协作，以确定容器查询是否可行，现在它们终于来了。与媒体查询类似，容器查询允许您根据其容器的大小而不是视口的大小来调整网页上特定项目的布局或样式。它们将是设计系统中创建可重用组件的宝贵工具。

Safari 16 支持尺寸查询和容器查询单位。“尺寸查询”是 Web 开发者在谈论容器查询时所想象的——即在容器达到特定尺寸时才应用 CSS 的机会。关于样式查询的其他想法也作为容器查询的一部分正在讨论中，以期未来实现。

容器查询单位与视口单位类似，但它们指定的是相对于查询容器尺寸的长度，而不是视口的尺寸。

单位	相对
cqw	查询容器宽度的 1%
cqh	查询容器高度的 1%
cqi	查询容器内联尺寸的 1%
cqb	查询容器块尺寸的 1%
cqmin	cqi 或 cqb 中较小的值
cqmax	cqi 或 cqb 中较大的值

适用于 macOS 的网页推送

网页推送将登陆 macOS Ventura 上的 Safari 16。这使您能够远程向您的网站和 Web 应用用户发送通知——即使 Safari 未运行也能送达这些通知。它使用了您可能在其他浏览器中熟悉的相同 Web 标准组合：Push API 和 Notifications API，以及 Service Worker。

用户首先通过用户手势（例如点击按钮）表明兴趣，然后选择加入通知。之后，他们将被提示授予您的网站或应用发送通知的权限。用户将能够在通知中心查看和管理通知，并在通知设置中按网站自定义样式和关闭通知。

如果您已经使用行业最佳实践为您的 Web 应用或网站实现了网页推送，它将自动在 Safari 中工作。但是，如果您通过浏览器检测排除了 Safari，则需要切换到功能检测才能使其正常工作。

Safari 中的网页推送使用与所有 Mac 和 iOS 设备上的原生推送相同的 Apple 推送通知服务。如果您在服务器上严格管理推送端点，请确保允许来自 push.apple.com 任何子域的 URL。您无需成为 Apple Developer Program 会员。

敬请期待 2023 年 iOS 和 iPadOS 上的网页推送。

子网格

CSS 网格于五年多前，即 2017 年 3 月发布，彻底改变了 Web 布局设计的可能性。子网格将网格提升到另一个层次，提供了一种简单的方式，将网格容器的“孙级”元素放置在该网格上。这使得在复杂布局中对齐项目成为可能，而无需受限于 HTML 结构。而且 Safari 的网格检查器允许您为您想要的任意数量的网格启用叠加层——这在编写子网格代码时特别有用。

Flexbox 检查器

继去年的网格检查器之后，Safari 16 新增了 Flexbox 检查器。它与 Safari 15.4 中新增的对齐编辑器完美结合。

Flexbox 容器的叠加层使您更容易可视化 CSS 对 Flexbox 容器的影响。新的叠加层可帮助您直观地区分自由空间和间隙。它还显示了项目的边界，揭示了它们在 Flexbox 容器的主轴和交叉轴上的分布方式。可切换的“顺序号”选项有助于显示容器中元素的布局顺序，这在使用order CSS 属性时可能很有用。而且，就像我们去年为网格提供的叠加层一样，您可以根据需要打开任意数量的 Flexbox 叠加层，而不会影响性能。

辅助功能改进

Safari 16 重新设计了 WebKit 在 macOS 上的辅助功能支持架构，从而带来了更高的性能和更强的响应能力。这一改变使 WebKit 能够以比以前更短的时间处理来自 VoiceOver 等客户端的更多辅助功能请求。在一些复杂的网页上，我们测量到辅助功能请求的处理量增加了一倍，而时间却减少了 25%。

此版本还通过确保带有display:contents的元素在辅助功能树中得到正确表示，极大地改进了对其的辅助功能支持。

动画改进

CSS 偏移路径（也称为运动路径）为 Web 开发者提供了一种沿任意形状的自定义路径对事物进行动画处理的方法。offset-path 属性允许您定义一个几何路径，沿着该路径进行动画处理。offset-anchor、offset-distance、offset-position 和 offset-rotate 属性为您提供了额外的能力来精确调整动画对象的移动。而offset属性则作为组合这些属性的简写。

借助 Safari 16，您现在可以对 CSS 网格进行动画处理。这意味着行和/或列大小的变化可以进行动画处理，为页面上的移动开辟了一系列新的可能性。

Safari 16 还增加了对合成操作的支持，解决了元素动画如何影响其底层属性值的问题。并且增加了对 39 个 CSS 属性的离散动画支持——完整列表请参阅 Safari 技术预览版 143 发布说明。

超出滚动行为

CSS 超出滚动行为决定了用户滚动到滚动区域边界时会发生什么。当您想要阻止滚动链时，这很有用——当用户在框内滚动并到达末尾时，您现在可以控制是否停止或允许页面其余部分的滚动。

共享 Worker

当您认为 Worker 类型已经足够多时，Safari 中又出现了一种新的 Worker 类型——共享 Worker。与 Service Worker 类似，共享 Worker 在后台运行 JavaScript，但其生命周期略有不同。只要用户打开了您的域的任何标签页，您的共享 Worker 就会运行，并且所有打开同一域的标签页都可以共享同一个共享 Worker。因此，如果您想要实现一个 WebSocket 连接到服务器并代表多个标签页进行通信的功能，可以尝试使用共享 Worker。

更多内容

还有更多内容，包括对表单控件的修复和改进，以及对<form>.requestSubmit()和 HTML 输入元素的showPicker()方法的支持。此外，还支持 Shadow Realms，以及对worker-src内容安全策略指令的支持。

要了解更多关于 Safari 16 为 Web 开发者带来的功能，包括错误修复列表，请阅读Safari 16 Beta 发布说明。

反馈

我们期待听到您的声音。请通过 Twitter 向 @webkit、@jensimmons 或 @jonathandavis 发送推文，分享您对本次发布的看法。Safari 16 中的哪项技术最让您感到兴奋？您希望接下来看到哪些功能或修复？如果您遇到任何问题，欢迎您就 Safari UI 提供反馈，或提交关于 Web 技术或网页检查器的 WebKit Bug 报告。提交问题确实能带来改变。

下载最新的 Safari 技术预览版，以站在 Web 平台的前沿并使用最新的网页检查器功能。您还可以使用 WebKit 功能状态页面，关注您最感兴趣的 Web 功能的新信息。