蘋果全球開發(fā)者大會（Apple Worldwide Developers Conference?，縮寫：WWDC?）是蘋果公司每年定期舉辦的信息技術(shù)交流活動，活動旨在向全球的軟件設(shè)計(jì)師展示蘋果公司最新的軟件及技術(shù)，通常用于展示 macOS、iOS、iPadOS、watchOS? 和 tvOS 系列以及其他蘋果公司的軟件和技術(shù)。

作為前端開發(fā)者，我們主要關(guān)注的重點(diǎn)在于 Web 方面。

在過去的一年，Safari? 的瀏覽器內(nèi)核 WebKit? 發(fā)布了超過 162? 項(xiàng)新功能和改進(jìn)點(diǎn)，包括新的 dialog? 元素、懶加載、:has()? 偽類、Web Locks API、File System Access API?、對 WebAssembly 的多項(xiàng)改進(jìn)等等。

在本次大會中，蘋果公司宣布了 Safari 16 beta? 版本的發(fā)行，我們一起來看看 Safari 16 beta 版本帶來了哪些新的能力。

Web Inspector Extensions

Safari 16? 帶來了對 Web Inspector Extensions? （類似于 Chrome? 的 Devtools Extension?）的支持。如果你的團(tuán)隊(duì)使用 React、Angular、Vue? 或 Ember? 這些強(qiáng)大的框架，或者可能是流行的測試套件或其他開發(fā)者服務(wù)?，F(xiàn)在有了 Safari Web Inspector Extensions，你就可以安裝來自這些框架和服務(wù)的開發(fā)工具擴(kuò)展，從而為你的開發(fā)提效。

和 Chrome? 開發(fā)工具擴(kuò)展的 JavaScript API?  也基本一樣。你可以輕松的把現(xiàn)有的 Chrome Extension? 移植到 Safari? 上，你只需要在 App Store 就可以搜到這些擴(kuò)展。

當(dāng)然，流行的第三方框架和服務(wù)的擴(kuò)展并不是 Web Inspector Extensions? 唯一令人興奮的用途。通常，對開發(fā)者工具的小幅增強(qiáng)就可以對工作流程產(chǎn)生巨大影響。要了解構(gòu)建 Safari Web? 擴(kuò)展的基礎(chǔ)知識、如何將現(xiàn)有擴(kuò)展轉(zhuǎn)換為與 Safari? 一起使用，以及如何在 App Store 打包發(fā)布，可以看看這個視頻講解 https://developer.apple.com/videos/play/tech-talks/110148/。

Web Inspector Extensions? 也帶來了對 Safari Web Extensions? 的其他改進(jìn)，包括能夠同步跨 iOS、iPadOS? 和 macOS 啟用的擴(kuò)展。

容器查詢

在響應(yīng)式布局布局中，經(jīng)常使用媒體查詢（Media Queries）檢測視窗的寬高，實(shí)現(xiàn)自元素樣式的自動調(diào)整。但是在一些頁面設(shè)計(jì)中，元素的容器尺寸發(fā)生變化時，元素的樣式也需要隨之變化。很顯然，媒體查詢無法支持這種場景。

CSS? 容器查詢就是來解決這個問題的，它一直是 Web? 開發(fā)者夢寐以求的功能，簡單來說: 容器查詢允許開發(fā)者根據(jù)容器元素的大小來設(shè)置元素的樣式。它類似于 @media 查詢，不同之處在于它根據(jù)容器的大小而不是視口的大小進(jìn)行判斷。

Safari 16 支持了一些新的容器查詢單位：

• cqw 查詢?nèi)萜鲗挾鹊?1%
• cqh 查詢?nèi)萜鞲叨鹊?1%
• cqi 查詢?nèi)萜?inline 尺寸的 1%
• cqb 查詢?nèi)萜?block 尺寸的 1%
• cqmin cqi 或者 cqb 的最小值
• cqmax cqi 或者 cqb 的最大值
• macOS 的 Web 推送

macOS Ventura? 上的 Safari 16? 即將推出 Web Push?。你可以遠(yuǎn)程向你的網(wǎng)站和 Web? 應(yīng)用程序的用戶發(fā)送通知。「即使 ?Safari 沒有運(yùn)行，也可以發(fā)送這些通知」。

它使用與其他瀏覽器相同的 Web? 標(biāo)準(zhǔn)：Push API? 和 Notifications API? 以及 Service Worker。

用戶可以通過用戶手勢（例如單擊按鈕）來選擇接收通知。然后，系統(tǒng)會提示他們授予你的網(wǎng)站或應(yīng)用發(fā)送通知的權(quán)限。用戶能夠在通知中心查看和管理通知，并在通知設(shè)置中自定義樣式并關(guān)閉每個網(wǎng)站的通知。

Safari? 中的 Web Push? 會使用和 Apple? 推送相同的通知服務(wù)，該服務(wù)支持所有 Mac? 和 iOS 設(shè)備上的本地推送。

另外， 蘋果還計(jì)劃在 2023? 年實(shí)現(xiàn)適用于 iOS? 和 iPadOS? 的 Web Push。

子網(wǎng)格

CSS Grid 布局? 在 2017? 年 3? 月發(fā)布，它徹底改變了 Web? 布局設(shè)計(jì)的可能性。然而，Subgrid? 將 Grid? 帶到了另一個層次，它使得跨復(fù)雜布局排列項(xiàng)目成為可能，而不受 HTML 結(jié)構(gòu)的限制。

故名思議，除了操縱同級別的網(wǎng)格，它擁有操縱子網(wǎng)格的能力，它可以實(shí)現(xiàn)比 Grid 更復(fù)雜的布局，比如下面的例子：

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

另外， Safari? 的 Grid Inspector 讓你可以讓你非常方便的開發(fā)和調(diào)試子網(wǎng)格布局。

Flexbox Inspector

繼去年的 Grid Inspector? 推出之后，Safari 16? 添加了 Flexbox Inspector。

Flexbox Inspector? 可以為你提供更好的 Flexbox 布局可視化，可以幫助你更好的從視覺上區(qū)分空閑空間和間隙。

可訪問性改進(jìn)

Safari 16? 重新構(gòu)建了 WebKit? 在 macOS? 上的可訪問性支持，提高了性能和響應(yīng)能力。這一改進(jìn)允許 WebKit? 在比以前更短的時間內(nèi)為來自客戶端(如 VoiceOver? )的更多可訪問性請求提供服務(wù)。在一些復(fù)雜的網(wǎng)頁上，大量的無障礙請求耗時減少了 25%。

該版本還通過確保元素在可訪問性樹中正確表示，極大地改進(jìn)了對具有 display:contents 的元素的可訪問性支持。

動畫改進(jìn)

CSS Offset Path? 為 Web? 開發(fā)者提供了一種沿任意形狀的自定義路徑設(shè)置動畫的方法。offset-path? 屬性可讓你定義要沿其設(shè)置動畫的幾何路徑。offset-anchor、offset-distance、offset-position、offset-rotate 屬性為你提供了額外的能力來細(xì)化被動畫對象的精確運(yùn)動。

#motion-demo {
  offset-path: path('M20,20 C20,100 200,0 200,100');
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

使用 Safari 16?，你現(xiàn)在可以為 CSS Grid 設(shè)置動畫。這意味著你可以對行或列的大小進(jìn)行動畫更改，這又為 Web 動畫的實(shí)現(xiàn)開辟了一種新的可能性。

Shared Worker

Safari 16? 新增了一種新型的 Worker? —— Shared Worker?。與 Service Worker? 一樣，Shared Worker? 支持在后臺運(yùn)行 JavaScript，但其生命周期略有不同。

只要用戶對你的域打開任何 tab?，你的 Shared Worker? 就會運(yùn)行，并且對同一域打開的所有選項(xiàng)卡都可以共享同一個 Shared Worker?。比如你讓一個 WebSocket? 連接打開到代表多個選項(xiàng)卡進(jìn)行通信的服務(wù)器，就可以使用 Shared Worker 實(shí)現(xiàn)了。

其他

• 支持通過CSS overscroll-behavior 屬性控制當(dāng)瀏覽器滾動條到達(dá)邊界時的行為；
• HTML input? 元素支持了<form>.requestSubmit()? 和showPicker() 方法；
• CSP內(nèi)容安全策略? 支持了新的指令：worker-src。