WebKit 官宣 Safari 16 Beta 版 Web 新功能！开发者“iOS 浏览器都用 Safari ？”

技术编辑：MissD丨发自 思否编辑部

公众号：SegmentFault

刚刚结束的苹果 WWDC2022 上，除了最新 iOS 16 Beta 版系统，WebKit 官方也宣布将推出 Safari 16 beta 版的主要 Web 技术。目前，Apple Developer program 成员已经可以通过安装 macOS Ventura、iOS/iPadOS 16 的开发者 Beta 版来测试 Safari 16。

太平洋时间 6 月 6 日，WebKit 官方博客发文详细介绍了此次 Safari 16 Beta 版中的 WebKit 新功能，具体内容如下：

• Web Inspector 扩展

全新 Safari 16 支持 Web Inspector 扩展，可以增强 Safari 的内置浏览器开发工具，特别是在使用功能强大的第三方框架和服务时尤其有用。通过使用 Safari Web Inspector 扩展，用户可以从这些框架和服务中安装开发者工具扩展，让工作能够更快、更轻松地进行开发。

Safari Web Inspector 扩展与其他浏览器中的开发者工具扩展使用相同的 JavaScript API，方便开发者工具扩展的创建者能轻松地将其移植到 Safari。同时，Web Inspector 扩展也加入了 Safari Web 扩展的其他改进，包括能够同步 iOS、iPadOS 和 macOS 上启用的扩展。

• 容器查询（Container Queries）

与媒体查询(Media Query)类似，容器查询允许用户根据容器的大小而非 viewport 的大小来调整网页上特定项目的布局或样式。

Safari 16 支持 Size queries（大小查询）和容器查询单元。容器查询单位类似于 viewport 单位，但它们指定了相对于查询容器而非 viewport 的维度的长度。

• macOS 上的 Web Push 功能

macOS Ventura 上的 Safari 16 即将推出 Web Push 功能，可远程向网站和 Web 应用程序的用户发送通知，通过推送 API 及通知 API，在 Safari 未运行时发送这些通知。

Web Push-in Safari 使用相同的 Apple Push 通知服务，为所有 Mac 和 iOS 设备提供本机推送功能。据悉，苹果将在 2023 年为 iOS 和 iPadOS 系统提供 Web Push 功能。

• 次网格（Subgrid）

CSS Grid 的出现彻底改变了 Web 布局设计的可能性，子网格将网格提升到了另一个层次，提供了一种将网格容器的子代放到该网格上的简单方法。它可在不受 HTML 结构约束的情况下跨过复杂的布局排列项目。Safari 的网格检查器允许用户为任意多个网格打开覆盖，这在编写子网格时尤其有用。

• Flexbox Inspector

继去年的 Grid Inspector 之后，Safari 16 添加了 Flexbox Inspector，它与 Safari 15.4 中添加的对齐编辑器（Alignment Editor ）完美匹配。

Flexbox 容器的覆盖使 CSS 对 Flexbox 容器的影响更容易可视化，新的覆盖有助于从视觉上区分可用空间和间隙。它还显示了项目的边界，以及它们是如何分布在 Flexbox 容器的主轴和横轴上的。

• 可访问性改进

Safari 16 在 macOS 上引入了 WebKit 可访问性支持的重新架构，从而提高了性能和响应能力。

此更改允许 WebKit 在比以前更短的时间内处理来自客户端（如 VoiceOver）的更多可访问性请求。在一些复杂的网页上，测量到在 25% 的时间内服务的可访问性请求数是原来的两倍。

• Animation Improvements（动画改进）

CSS 偏移路径（也称为运动路径）为 Web 开发人员提供了一种沿任意形状的自定义路径设置动画的方法。通过“偏移路径”（offset path）属性，可定义要沿其设置动画的几何路径。

“偏移定位”（offset anchor）、“偏移距离”（offset distance）、“偏移位置”（offset position）和“偏移旋转”（offset rotate）属性为用户提供了其他功能，可以优化正在设置动画的对象的精确移动。

目前，通过 Safari 16 用户可设置 CSS 网格的动画，也就是说可以对行或列的大小进行动画更改，从而为页面上的移动提供了全新的可能性。

Safari 16 还增加了对复合操作的支持，解决了元素动画如何影响其基础属性值的问题，同时还为 39 个 CSS 属性添加了对离散动画的支持。

• Overscroll Behavior

CSS Overscroll 行为决定了当用户滚动浏览器并到达滚动区域的边界时会发生什么，当用户想要停止滚动链接时它就很有用，当用户在框内滚动并到达末尾时，就可以控制停止或允许滚动页面的其余部分（控制浏览器过度滚动时的表现）。

• “共享程序员”（Shared Worker）

Safari 中更新了一种新类型的“工作人员” —— Shared Worker，Shared Worker 在后台运行 JavaScript，只要用户对您的域打开了任何选项卡，您的共享工作线程就可以运行，并且对同一域打开的所有选项卡都可以共享同一个共享工作线程。因此，如果您想要像打开一个 WebSocket 连接到一个代表多个选项卡进行通信的服务器这样的操作，请尝试使用 Shared Worker。

• 其他

其他新功能还包括对表单控件的修复和改进，以及对<表单>的支持。HTML 输入元素的 requestSubmit（）和 showPicker（）方法，以及对 Shadow Realms 的支持和对 Worker src Content Security Policy 指令的支持。

作为本次 WWDC2022 活动上的一大技术亮点，Safari 16 Beta 版中的 WebKit 新功能确实让广大开发者兴奋不已。但是，与此同时在开发者社区 Reddit上，WebKit 的新功能却引发了不少开发者的“吐槽”和热议。

这里，我们看到其中一片题为“Web push notifications are coming to iOS in 2023”的帖子里，就有不少开发者对这一点表达了自己的观点，大家感受下：

原帖地址：

https://www.reddit.com/r/programming/comments/v6c0lz/web_push_notifications_are_coming_to_ios_in_2023/

“Oh please, not so fast Apple. With this break neck speed we might even get the PWA install prompt before the end of the century.”

哦，拜托，别那么快，苹果。以这种惊人的速度，我们甚至可能在本世纪末之前得到PWA安装提示。

“we might even get the PWA install prompt before the end of the century.Hopefully never.”

我们甚至可能在本世纪末之前得到PWA安装提示。
希望永远不会。

“How about stop forcing all browsers to be Safari on iOS first, yeah?”

不如先停止强制所有浏览器在 iOS 上使用 Safari，好吗？

“Do you mean forcing them to use the WebKit engine? There are other browsers for iOS but they currently all have to use WebKit.”

你的意思是强迫他们使用 WebKit 引擎吗？还有其他 iOS 浏览器，但它们目前都必须使用 WebKit。

“Oh yay, another pop up I have to say no to on literally every website from 2023 onwards.”

哦，耶，从 2023 年起，我必须对每个网站上的另一个弹出窗口说不。

“So it just said ‘look for Web Push on iOS in 2023’

Honestly I am not too hopeful about this as I would imagine it would probably be locked behind layers of settings because Apple being Apple. I can't really see they would make it easy for people to escape the App Store ecosystem.

Too difficult for me to imagine Apple would actually allow IM apps that bypass their app store.”

......

据了解，近一年来 WebKit 浏览器共推出了 162 多项新功能和改进，包括 Safari 15.2、Safari 15.4 和 Safari 15.5。今年早些时候推出的功能包括 dialog 元素、lazy loading、Inactive、：has（）伪类、新视口单元、层叠层、焦点可见、强调色、外观、彩色字体的字体调色板、BroadcastChannel、Web Locks API、File System Access API、WebAssembly 的增强功能、对画布中 Display-P3 的支持、对 COOP 和 COEP 的添加，以及在 Web Inspector 中改进了 CSS 自动完成和新的 CSS 变量工具等等。

此次更新的 Web 技术，主要是可以让用户在 Safari 16 上更方便的工作。然而，备受开发者吐槽的“Web push”功能以及疑似“强迫让所有 iOS 上的浏览器都用 Safari”的操作，确实成为了不少用户的烦恼。

参考链接：

https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/

- END -

十周年，感谢一路同行

周年庆活动已全面上线

超多福利等你来拿

↓ 戳下方图片了解详情 ↓