Introduction
Safari 16.4 終於正式降臨了，從其功能介紹頁面可以感受得到充滿了自信且可望重新拾得 developers & users 的親睞，更新的項目森羅萬象非常的豐富，Scrollbar 長度會讓人捲個幾下就放棄不想再繼續看下去，我也大多跳著看不然工作都做不完了～
簡單先歸納一下此次更新的要點如下：
- Web APP 的全面進化與支援，除了大家敲碗的 web push API、notification API 以及 ServiceWorker 外，更支援了 Badge API 以及更全面的 manifest 功能，除此之外還加碼了Screen Wake Lock API、Screen Orientation API、User Activation API 以及 Web Codecs API。可以說一次追滿以前的不足，讓 Web APP 於 iOS 上的可玩性大大提升不少。
- HTML 功能的支援，包含了對 web component 更加的友善，除了無需透過 JavaScript 就可以注入 ShadowDOM 外，更號稱對於 a11y 有夠強大的支援，聽起來很是令人感到興奮，但實際上是不是真有的那麼厲害，還有待觀察。另外也可以在 <iframe /> 上掛上 loading attribute 囉～
- 進擊的 CSS，追加了不少 pseudo class 以及新穎的 color 支援，另外對於 media query 的撰寫上更加的友善了，可以避免巢狀結構的囧境，亦讓很是令人感到混淆的 min-width / max-width 可以採用邏輯判斷式來描述區間，舒適度大大提升～
- Web Inspector 功能提升，其實上面支援的東西越多，它就應該要提供相對應的檢測，不然就只是廢物。由於它的 disabled cache 的功能讓我前一陣子一直撞牆感到賭爛，所以成功換到了我的鄙視，不是很在乎他支援了什麼屁～
以下就針對幾個我感興趣的項目來做一些介紹與筆記。
Web Push
Web app 和 native app 最常被人拿起來比較的重點項目就是 notification 的發送，Apple 總是喜歡用特規顯示自己的高檔並利用該點來賺取保護費，不知怎的終於願意支援 web push / notification / service worker …等的 init 方式了，也就是說我們將有機會用對等的 code 在 iOS 上的 web app 來進行訊息的推播了，也算是大大地往前跨了一步。
不過，筆者更新了 iOS 16.4 後，立馬透過先前撰寫的 Web component > Web Push 來進行測試，卻依舊沒有辦法正常 init，有點擔心是不是又做了了什麼特規，等有空再來詳細測試！
Web Component
上面寫道無需 JavaScript 的介入就可以插入 ShadowDOM，我個人還蠻好奇要怎麼做可以直接注入 ShadowDOM 進來，不過很可惜的並沒有相關的 demo 可以參照著看，另外，文章中寫道支援了 <Slot /> 來讓 lightDOM 的 element 可以穿透進 ShadowDOM 裏，其實…這早就有支援了啊？不知道是糊塗了還是多寫點東西來吹噓自己的豐富。
CSS
這裡的支援倒是蠻廣的，除了 pseudo class > :dir() 外，還有一些新屬性的支援 magin-trim 以及 rlh / lh 的相對單位導入，另外最有感的部分不外乎就是 media query 的撰寫更加的好閱讀～
- margin-trim: 透過 margin-trim 的設定，可以避免在 children element 進行額外的 margin 設置來消除既有的距離。
- unit > lh / rlh: 這就是相對於 line-height 的單位，如下面範例所示這個 <p /> 會和上下 element 有 1.68rem 的距離。有了這個單位便可以做更細緻的處理與規劃。
- font-size-adjust: 相信大家對這個屬性都不陌生吧！某年某個瀏覽器設置了最小 font-size 的限制，便是透過這屬性來突破這限制。
- pseudo class > :dir()，透過這個 pseudo class 可以讓不同 right mode 的呈現有客製化的處理與呈現。
此外，:fullscreen 已經不需要再加上 vendor prefix 了，更強化了多款 video / audio 類型的支援，比方說： :playing / :paused / :seeking / :buffering / :stalled / :picture-in-picture / :volume-locked / :muted …etc，如果搭配 :has() 使用的話，可以有更靈活的表現喔！
Color
其實這也算是 CSS 的一環，Safari 16.4 多了些 color method 可以使用，對筆者來說其實 rgba 就已經用不完了，現階段合作的低賽也變不出什麼了不起的把戲，所以短時間還想不出相對應的使用契機，不過還是簡單筆記一下好了～
- hsl(): 新穎的顏色表示法
- lch(): 新穎的顏色表示法
- color-mix(): 這個就有趣多了，可以針對特定的 color space 來進行不同顏色的交互渲染混出全新的組合，更加貼近 designer 的工作環境配置。
Media Queries 陳述式躍進
每次撰寫 media queries 陳述式的時候總會讓我悃擾不已，對於最小寬度以及最大寬度的設置與範圍讓要想好一陣子才能理清其含義。
如上所述，它的應用區間其實就是 400px ~ 900px 之間，如今它已經支援了邏輯陳述式了，所以我們可以把上面的式子改寫成
是不是更加淺顯易懂了，再也不用 min-width / max-width 傻傻分不清楚了，此外也可以透過 and / or / not 來改善巢狀結構喔！
上面這噁心不好閱讀巢狀結構可以改寫成
或是
是不是更好閱讀了～
Custom Properties
相信大家對於 custom properties 一點都不陌生，也廣泛的應用在我們服務當中，現在 Safari 16.4 也支援了透過 @ property 來進行屬性設置，一但定義好之後，之後的 transition 便可以針對這些 custom properties 來做漸變處理喔！這亦是 Hudini’s API 的一環，有興趣的朋友不妨點擊這裡觀看實際範例。
除了 @ properties 支援外，亦支援了 CSS Typed OM，藉由 JavaScript 的介入來更加便利的進行 CSS 屬性的截取與設置，讓傳統繁瑣的取法可以更加舒適與便利。
iframe[loading=lazy]
iframe 現在也可以掛上 native lazy loading 囉～和 <img /> 的設置一樣，記得要加上 width / height 讓瀏覽器可以預先準備好它所佔用的範圍。當然也可以透給 CSS aspect-ratio 屬性來設置。
以上，便是我整理了相關更新手札，希望大家閱讀後對於 Safari 16.4 的更新能有更深切的感覺與想法，更希望對大家有所助益！如有任何問題，歡迎一同討論研究喔！