Introduction
隨著 iOS 17.4 的釋出，也意味著 Safari 17.4 的正式亮相，每每 Safari 更新總會帶給我無限驚奇，一方面期待它能有效提升各種 CSS、Web API 的支援度，另一方面亦期待它可以率先支援功能並讓它成為標準，成為瀏覽器的領頭羊一般。
這次的更新不免俗的一樣吹噓自己架構調整使得效能有飛躍性地提升先，老實說不是很在乎這些五四三，還是來看看有哪些更新比較實在，以下將會介紹一些筆者比較感興趣的更新項目給大家，若想知曉更詳細的更新項目亦可直接觀看官方的更新介紹。
Web APP
可能礙於歐盟的關係，所以 Safari 提升 Web APP 的友善度，讓它可以更廣泛的支援 manifest > shortcuts 以及 categories。這兩個其實不是新屬性，所以如果你的 Web APP 本來就有設定，便可以無縫讓 Safari 有更有趣的呈現。
- shortcuts
Chrome > Web APP 的 shortcuts 主要是出現在 dock icon 上的 contextmenu 上，以 Yahoo 拍賣為例，我們可以清楚地發現「找商品」、「賣東西」、「即時通」、「我的拍賣」便在此陳立出來方便使用者快速前往。
Safari 的表現比較特別，除了上述的 Dock contextmenu 呈現外，亦可以透過 File menu 中。
- categories
透過 categories 的設置除了讓 Safari 可以更清楚的知曉該 Web APP 的類別外，當使用者新增 Launchpad folder 時，亦會自動將之作為預設的名稱。
Form elements
Safari 很喜歡在 form elements 上做文章，筆者依稀記得 Safari 有一年吹噓自己的 input widget 的呈現好棒棒（input[type=color]），我們來看看 17.4 有哪些有趣的更新～
- input[type=checkbox][switch]
貼心的 Safari 知曉 web developer 很喜歡 iOS 上 switch 的呈現，現行頁面上的 switch 效果大多是 developer 自己客製化呈現，利用 input[type=checkbox] 以及 CSS 進行變化，現在 Safari 直接做給你，再也不需要自己客製化處理了（僅有 Safari 支援）。
使用方法非常的簡單，只要在 input[type=checkbox] 多加上 switch 這個 attribute，便可以立即轉換它的呈現。
Web developers 可以透過 CSS > accent-color 來改變色系，另外也可以直接針對 pseudo class 來做更細緻的調整。
- Vertical writing modes
現在多數的 form element 都支援直式書寫的屬性了，只要透過 CSS > writing-mode 屬性設置成 vertical-* 系列即可～
筆者其實幾乎沒有直式書寫的需求，不過真心覺得 input[type=range] 、progress 可以支援倒也挺便利，雖然說這兩個元件也可以透過 CSS rotate 屬性來完成 UI 的呈現，但是有的瀏覽器對於 interaction 卻一樣是橫式操作，非常容易造成混淆～原生支援最高！！
- Horizontal Rules inside Select
Safari 17.4 終於可以在 <select /> 裡頭下 <hr /> 了，透過 <hr /> 的置入，讓 UI 分群可以更加清晰。不過筆者在 iOS 上測試的時候發現，它的呈現拉齊 browser contextmenu，都好粗一條，個人不是很喜歡 orz
CSS supports
2023 年 CSS 新增了非常多樣的支援與呈現，讓開發過程變得更加有趣與便利，我們來看看 Safari 多了哪些支援吧！
- align-content everywhere
有在使用 flex 或是 grid 應該對於 align-content 一點都不陌生，透過這個屬性的設置，便可以很輕易地來完成內容物的水平對齊原則，不過這屬性和 flex / grid 有相依性，也因此 web developers 需要額外的 HTML 結構才能順利地套用 align-content 上去。
如今只要是 block 或是 table layout 通通都可以直接使用這個屬性了，再也不需要額外調整結構了！真是德政啊～（Chrome VER.123 也會支援）
- at-scope
其實 Chrome VER.117 就已經支援 at-scope 了，透過 at-scope 的設置，web developers 可以更有效率的來設置一些客製化樣式處理，藉此移除贅 code，讓開發與維護可以更加簡約～
如範例所示，針對不同 theme 裡頭的連結顏色就可以有效收納相同的屬性。有興趣的朋友亦可點擊 An introduction to @scope in CSS 觀看更詳細的介紹與應用。
- White space and text wrap
Safari 很喜歡在文字的呈現上做文章，此次亦做了若干更新。text-wrap 終於拉齊標準，支援了 balance / pretty 等新穎的屬性。另外搭配 white-space-collapse 來使用的話，可以讓句子斷行以及 space 的呈現更加符合期待～
Web API
令筆者感到驚豔的是 Safari 竟然這麼快就支援了 Declarative Shadow DOM，Declarative Shadow DOM 可以說是 Web component 的一個重點更新，透過這項支援，可以讓 web developers 在 light DOM 直接設置 shadow DOM 裡頭的結構，提供了一定程度的便利性。
如範例所示，透過 template[shadowrootmode] 的設置，web component 在 init 的時候就會自動將這個 element 抽離並直接 attach 至 shadowRoot 裡。
由於這個 Web API 太新了，所以筆者建議最好 detect 一下當前環境是否支援，並做出相對應的 fallback。
Media
Safari 非常不可思議的大張旗鼓訴說 <video /> 終於支援 WebM 格式了，筆者其實一點都不在乎 XD
Conclusion
以上便是筆者針對 Safari 17.4 整理的一些功能介紹，希望本篇能有效地幫助到大家，讓大夥們可以透過 Safari 的更新來讓 web page 的呈現更加豐富有趣～ #Safari
Reference
- WebKit Features in Safari 17.4
- Use Safari web apps on Mac
- manifest > shortcuts
- manifest > categories
- CSS > accent-color
- CSS vertical writing mode for form control elements
- Support for align-content in block and table layouts
- An introduction to @scope in CSS
- CSS > text-wrap
- CSS > white-space-collapse
- Declarative Shadow DOM