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

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

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

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

Web Inspector Extensions

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

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

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

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

容器查詢

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

CSS? 容器查詢就是來(lái)解決這個(gè)問(wèn)題的，它一直是 Web? 開發(fā)者夢(mèng)寐以求的功能，簡(jiǎn)單來(lái)說(shuō): 容器查詢?cè)试S開發(fā)者根據(jù)容器元素的大小來(lái)設(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ā)送通知?！讣词?nbsp;?Safari 沒(méi)有運(yùn)行，也可以發(fā)送這些通知」。

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

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

Safari? 中的 Web Push? 會(huì)使用和 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? 帶到了另一個(gè)層次，它使得跨復(fù)雜布局排列項(xiàng)目成為可能，而不受 HTML 結(jié)構(gòu)的限制。

故名思議，除了操縱同級(jí)別的網(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 布局可視化，可以幫助你更好的從視覺(jué)上區(qū)分空閑空間和間隙。

可訪問(wèn)性改進(jìn)

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

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

動(dòng)畫改進(jìn)

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

#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è)置動(dòng)畫。這意味著你可以對(duì)行或列的大小進(jìn)行動(dòng)畫更改，這又為 Web 動(dòng)畫的實(shí)現(xiàn)開辟了一種新的可能性。

Shared Worker

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

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

其他

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