WebKit 官宣 Safari 16 Beta 版 Web 新功能！開發(fā)者“iOS 瀏覽器都用 Safari ？”

技術編輯：MissD丨發(fā)自 思否編輯部

公眾號：SegmentFault

剛剛結束的蘋果 WWDC2022 上，除了最新 iOS 16 Beta 版系統(tǒng)，WebKit 官方也宣布將推出 Safari 16 beta 版的主要 Web 技術。目前，Apple Developer program 成員已經可以通過安裝 macOS Ventura、iOS/iPadOS 16 的開發(fā)者 Beta 版來測試 Safari 16。

太平洋時間 6 月 6 日，WebKit 官方博客發(fā)文詳細介紹了此次 Safari 16 Beta 版中的 WebKit 新功能，具體內容如下：

• Web Inspector 擴展

全新 Safari 16 支持 Web Inspector 擴展，可以增強 Safari 的內置瀏覽器開發(fā)工具，特別是在使用功能強大的第三方框架和服務時尤其有用。通過使用 Safari Web Inspector 擴展，用戶可以從這些框架和服務中安裝開發(fā)者工具擴展，讓工作能夠更快、更輕松地進行開發(fā)。

Safari Web Inspector 擴展與其他瀏覽器中的開發(fā)者工具擴展使用相同的 JavaScript API，方便開發(fā)者工具擴展的創(chuàng)建者能輕松地將其移植到 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 應用程序的用戶發(fā)送通知，通過推送 API 及通知 API，在 Safari 未運行時發(fā)送這些通知。

Web Push-in Safari 使用相同的 Apple Push 通知服務，為所有 Mac 和 iOS 設備提供本機推送功能。據悉，蘋果將在 2023 年為 iOS 和 iPadOS 系統(tǒng)提供 Web Push 功能。

• 次網格（Subgrid）

CSS Grid 的出現(xiàn)徹底改變了 Web 布局設計的可能性，子網格將網格提升到了另一個層次，提供了一種將網格容器的子代放到該網格上的簡單方法。它可在不受 HTML 結構約束的情況下跨過復雜的布局排列項目。Safari 的網格檢查器允許用戶為任意多個網格打開覆蓋，這在編寫子網格時尤其有用。

• Flexbox Inspector

繼去年的 Grid Inspector 之后，Safari 16 添加了 Flexbox Inspector，它與 Safari 15.4 中添加的對齊編輯器（Alignment Editor ）完美匹配。

Flexbox 容器的覆蓋使 CSS 對 Flexbox 容器的影響更容易可視化，新的覆蓋有助于從視覺上區(qū)分可用空間和間隙。它還顯示了項目的邊界，以及它們是如何分布在 Flexbox 容器的主軸和橫軸上的。

• 可訪問性改進

Safari 16 在 macOS 上引入了 WebKit 可訪問性支持的重新架構，從而提高了性能和響應能力。

此更改允許 WebKit 在比以前更短的時間內處理來自客戶端（如 VoiceOver）的更多可訪問性請求。在一些復雜的網頁上，測量到在 25% 的時間內服務的可訪問性請求數是原來的兩倍。

• Animation Improvements（動畫改進）

CSS 偏移路徑（也稱為運動路徑）為 Web 開發(fā)人員提供了一種沿任意形狀的自定義路徑設置動畫的方法。通過“偏移路徑”（offset path）屬性，可定義要沿其設置動畫的幾何路徑。

“偏移定位”（offset anchor）、“偏移距離”（offset distance）、“偏移位置”（offset position）和“偏移旋轉”（offset rotate）屬性為用戶提供了其他功能，可以優(yōu)化正在設置動畫的對象的精確移動。

目前，通過 Safari 16 用戶可設置 CSS 網格的動畫，也就是說可以對行或列的大小進行動畫更改，從而為頁面上的移動提供了全新的可能性。

Safari 16 還增加了對復合操作的支持，解決了元素動畫如何影響其基礎屬性值的問題，同時還為 39 個 CSS 屬性添加了對離散動畫的支持。

• Overscroll Behavior

CSS Overscroll 行為決定了當用戶滾動瀏覽器并到達滾動區(qū)域的邊界時會發(fā)生什么，當用戶想要停止?jié)L動鏈接時它就很有用，當用戶在框內滾動并到達末尾時，就可以控制停止或允許滾動頁面的其余部分（控制瀏覽器過度滾動時的表現(xiàn)）。

• “共享程序員”（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 新功能確實讓廣大開發(fā)者興奮不已。但是，與此同時在開發(fā)者社區(qū) Reddit上，WebKit 的新功能卻引發(fā)了不少開發(fā)者的“吐槽”和熱議。

這里，我們看到其中一片題為“Web push notifications are coming to iOS in 2023”的帖子里，就有不少開發(fā)者對這一點表達了自己的觀點，大家感受下：

原帖地址：

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 上更方便的工作。然而，備受開發(fā)者吐槽的“Web push”功能以及疑似“強迫讓所有 iOS 上的瀏覽器都用 Safari”的操作，確實成為了不少用戶的煩惱。

參考鏈接：

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

- END -

十周年，感謝一路同行

周年慶活動已全面上線

超多福利等你來拿

↓?戳下方圖片了解詳情 ↓