Introduction
一年一度的 WWDC 於 06/06 正式展開，靠 web 吃飯的我，對於每年這個時刻總是期待非常，一方面想知道 Safari 推出了哪些有趣、新穎的功能，另一方面又怕噴出了一堆光怪陸離的實作~深深希望它可以跟標準靠攏，不要成為新生代 IE 。
鎖定了 What’s new in Safari and WebKit 這場 talk，要來跟大家分享一些觀後心得～
節目開頭不免俗的當然要先吹噓自己優越部份，打從 Safari 15 開始，這年來 Safari 也不斷的與時俱進，向 W3C 靠攏，藉由多回更新打造出人人的喜愛的 Safari。此次 Safari 15.1 ~ 16 更一舉提供了高達 162 項新功能（應該一堆亂七糟沒人用的功能都算進去吧！）由於時間關係，所以該 session 將依照下列 highlight 項目分門別類至 HTML、CSS、Web Inspector、Web API、JavaScript and WebAssembly 以及 Security and privacy 等六個領域進行講解與介紹。
接下來我也將針對這六個領域的更新項目來做些筆記與抒發。
HTML
講者透過一個不怎麼樣的故事以及醜醜的網頁來陳述對於 z-index 使用上的困擾，所以她很歡喜地跟大家介紹－Safari 支援了 HTML<dialog /> tag。
<dialog />
不僅更加符合語義化結構，也徹底解決了她的問題。除了支援 <dialog /> tag 外，相對應的 CSS 自然不可或缺，也因此 developers 可以透過 ::backdrop 這個 pseudo element 來進行裝飾，讓其呈現樣式與效果可以更加符合服務需求。
如範例所示，除了設置漸層的背景外，更導入 animation 來讓它有 fade in 的效果。
inert
這是一個新穎的 attribute，針對一些 form 操作，某些時候我們可能想要暫時的阻止或忽略一些 input 行為，甚至不想讓該元件被 focus 或者進行其他操作。雖然說可以直接在上面蓋一層 overlay 或者透過 CSS pointer-events 去達到這樣的訴求。現在也可以直接透過 attribute inert 的操作來完成這樣的事務。
lazy loading images
Safari 已經支援了原生的 lazy loading，這表示說 web developers 可以無憾的將 lazy loading lib 移除了，有效的節省頻寬以及效能。
CSS
CSS 的部分倒是著墨頗多，除了一些標準的支援外，最令人訝異的莫過於率先支援了 :has()。
Container Queries
這是一個革命性的設計，傳統只能針對頁面的 inline-size 進行版面的變態調整，讓當前的 web page 可以針對不同裝置解析度來做不同的呈現。如今，也可以讓特定的 module 針對自身條件的變化（）來進行不同的樣式調整，讓頁面 layout 呈現可以有更多元活潑的表現。
如範例所示，便是針對 inline-size（width）的變化來調整 grid-template-columns。
Cascade Layers
CSS 權重一直都是一門學問，也因為這樣造成了 CSS 撰寫與維護上的難度，為了贏過它人，不外乎就是長到不行的 CSS selector，不然就是 inline style 以及 !important 的使用。而 Cascade Layers 便是為了有效解決這樣的問題而誕生。
簡單的說就是把權重往上擺到 Layers 上，讓 developers 可以依照這個準則來進行覆寫，讓維護與開發相輔相成。
Pseudo class > :has()
一般來說， CSS Selector 總是由左至右撰寫，並且針對最右邊選到的 elements 進行裝飾。也就是說 web developers 其實無法做到由右向左去裝飾最左邊的節點。有了 :has() 之後，這情況便徹底改觀了。
Web developers 可以設定子元素的條件並將之置入於 :has 裏頭，如同字面上的意思，一但它有了這樣的條件，便可以套用樣式。
如範例所示，當 form 裡頭的 checkbox 被勾起來的時候，便可以讓 form 的背景調整為 #ff927a 的顏色。可以說是強大非常啊~真真希望其他瀏覽器可以趕快跟進～
New viewport units
viewport units 除了既有的 vw / vh / vi / vb 外，又多了新的成員了，分別是 svh、lvh 以及 dvh，如下圖所示：
這可以說完完全全是 Apple 自作孽搞出來的變態產物，因應其浮空 function bar 的 顯示 / 收合造成可視範圍變化造成窘境。
簡單記憶法
- s: small
- l: large
- d: dynamic
如果想要更精確的來使用 viewport 化，便可以針對這些 units 來做更細緻的呈現。
offset-path
厭倦一成不變的 animation 撰寫與呈現了嗎？ 現在多了 offset-* 系列屬性可進行設置，宛若設定路徑般，讓物件 tween 的呈現可以依照路徑設定進行移動。讓 web animation 更加活潑不呆板。
我個人還沒體驗這樣的實作，有機會的話也要將之實作於服務中。讓服務轉場可以更有趣~
scroll-behavior
這是一個一點都不新的屬性，不過願意支援也算是好事，透過這個 property 的設置，可以讓 scroll 的行為不會那般的生硬。除了 CSS 外， Scroll 相關的 web api 也均有支援 smooth 的屬性了。
:focus-visible & accent-color
:focus-visible 這個 pseudo class 可以說是 Accessibility 的強力輔助屬性，讓物件 focus 時的樣式變化可以更加細膩。而透過 accent-color 的設置則可以迅速有效地快速調整 form element default 的系統顏色，讓這些原生的 element interaction 可以更加符合當前服務的特色。（demo code 犯了非常低級的錯誤，真真讓我大吃一驚）
Replacing WebKit prefixes
部分屬性或值均已正式支援，也就是說可以將 vendor prefixes 移除了～如：backface-visibility、print-color-adjust、text-align: match-parent、mask、text-combine-upright、appearance。
font-palette
其實我從來沒有用過這個 property，看來針對 light / dark mode 有了更多元的支援，亦可以自行進行客製化。
Subgrid
subgrid 的支援讓排版設計可以更加容易且一致。好比下面範例，透過 subgrid 的設置，每一張 card 裡頭的元素的排列、佔用的空間都得以 align，不需要嚴格限制 card 裡頭元素的高度。輕鬆玩轉 design～
Web Inspector
簡單的說就是 Safari 的 DevTools，老實說我蠻無感，因為不管在功能、易用性或者呈現上都和 Chrome DevTools 相似。我也說不準到底是誰致敬誰，好像跑步游泳一樣，還不是你做什麼他就做什麼！
Web API
這裡其實講的不多，主要介紹了 web push 以及 manifest V3 的支援，可以說讓 web page 以及 extension 的開發可以快速的移植既有經驗，大大的降低了學習門檻。
Web Push
Apple 終於願意支援 web push 了，瞧其 roadmap，應該是 2023 年才有機會全面支援。更令人欣慰的莫過於聽到講者說道：如果你的服務已經支援 web push 了，那麼便可以無縫接軌，更不需要開發者帳號。這真是他媽的德政啊～
Manifest file Icons
介紹了幾種設置 app icons 的方法，可以透過 manifest > icons 或者 HTML meta tag 來設置 touch icons，如果都沒有設置的話，則會依照系統截圖作為其 touch icon。
Broadcast Channel
這其實蠻有趣的，可以透過 broadcastChannel.postMessage 來針對不同視窗進行訊息佈達。好比左視窗可能已經缺貨中了，便可以透過該 web api 將這訊息傳遞給其他同 web page 的視窗。
File System API
終於可以在 Safari 上使用 file system 了，它會 web site domain 為主進行設置（如同 localStorage 一般），web developers 可以適時的存放一些資料於 client 裡頭。不確定是否需要先取得 user 授權，有興趣的朋友不妨試試看~
P3 color support
這裡不外乎就是吹噓 Safari 率先於 video / image 上支援 P3 color，讓顏色的呈現更加多采多姿，聽起來很威，但實際上不是人人都有血輪眼，有支援固然好，但若非專業用途，則如同糞土一般，用不上就是用不上~
JavaScript and WebAssembly
快接近尾聲了，接下來就是介紹到一些 JavaScript 的新穎支援以及進擊的 WebAssembly 。
SharedWorker
透過 ShareWorker 的註冊與監聽，可以迅速 sync data 至不同的 client 更可以大大的減少 memory 的使用，達到了力與美的完美呈現外，亦提供了 localStorage event 外的全新選擇。
Array indexes made easier
多了幾種新的 methods 支援，分別為 findLast()、findLastIndex()、at()。讓 array 操作可以更加便利與優雅~
intl updates
intl 支援更加寬廣了，對於有做多語系服務的公司來說真真是福音來著的。
WebAssembly
聽說對 WebAssembly 更加的友善，讓不同語言撰寫可以有效的封裝起來切更有效率的執行。
Security and privacy
每次看到 apple 推這東西出來，心理都感到一陣寒意，因為有的對服務來說就是切肉斷骨級的制約~希望這次不要太搞人！！
COOP and COEP
針對跨網域請求有了更多的支援的設定，詳見 content security policy level 3。
以上便是 WWDC > What’s new in Safari WebKit 的簡單導讀，歡迎對這些主題興趣的朋友可以一同討論、互惠互利，共同成長～