Introduction
隨著 WWDC21 的落幕，我們再次見證 Apple 所帶來的無限驚奇與喜悅，由於 Safari 的市佔率之高，逼得 web developers 不得不針對其「進化」做出相對應的處理。本文便是針對 Design for Safari 15 這個 session 來進行探討，讓既存的 web page 不僅可以快速響應 Safari 的變革，更能有效的駕馭這些嶄新的支援讓 web page 的使用者體驗能昇華至另一境地。
筆者完整看完這個 session 後，基本上可以承襲與進化這兩個詞彙來畫下句點，不管是 UI 或者使用習慣的變更皆是透過既有的屬性下去擴展，也就是說如果您當前的 web page 已經與時俱進，新穎的 meta、CSS 以及 Apple 的 Human Interface Guidelines 早就內建其中的話，那剩下的就僅僅只是畫龍點睛、好上加好的精緻手工活兒而已。反之，若是這領域的初心者的話，倒也不用氣餒，相信透過以下的重點介紹，也能在十分鐘之內讓你的 web page 達到 Safari 15 ready 的基本配置。
Theme Color
此次 Safari 的主打項目之一就是針對整體外觀做一重新定義，讓既有的設計可以更加的簡約，去蕪存菁之餘更希望能更加地凸顯 web content 的價值，讓 web page 的 theme 可以藉此擴展至整個 Safari，達到更舒適愉悅的瀏覽體驗～
如上所示，我們可以清楚地看到既有的系統 UI 便直接承襲 web content 的主題色系來做出相對應的變化，藉此擴展了 web content 的邊界，營造出無垠且一體的瀏覽體驗～
要怎麼樣才能達到這樣的效果呢？其實只要透過 meta 設置便可以輕鬆完成
<meta name='theme-color' content='#fcda19' />有做過 PWA 的朋友應該對這個屬性一點都不陌生，由於 Android PWA 並沒有設置 launch screen 的功能，所以她 default 會以置中 touch icon 搭配填滿的 theme color 來達成 launch screen 的呈現效果。
如果您是在 macOS Chrome 進行 PWA install 的話，那麼 theme color 也會被應用在系統的 UI Bar 上，是不是和 Safari 15 有異曲同工之妙～
除了承襲既有的 meta 外，Safari 還貼心地幫 developers 想到 dark mode 的支援該怎麼處理，所以她多了 property > media 的支援，讓 developers 可以針對 light / dark mode 設置不同的 theme color，為了避免瀏覽器支援度問題，所以請將具備 media 屬性的 meta 放在 default theme color 的下方。
<meta name='theme-color' content='#fcda19' />
<meta name='theme-color' content='#fcda19' media='(prefers-color-scheme: light)' />
<meta name='theme-color' content='#15181c' media='(prefers-color-scheme: dark)' />Page Title
由於簡約設計，所以 tab 的識別內容呈現長度就會因此縮減，因此不同 tab 的識別作用就顯得更加重要，tab 的識別內容主要就是來自 page title，所以 developers 對於 title 的設置便不可馬乎。
早期，我們被訓練成 title 的 pattern 為
<title>{Site Name} - {Page Title}</title>如果仍舊採用這樣的 pattern，那麼每個 tab 的識別內容可能就都會是 Site Name，對於 user 來說，毫無識別作用。所以請儘量讓 unique 的部分往前面擺放～
如下所示，稍微調整一下 title pattern︰
<title>{Page Title} - {Site Name}</title>
如此，便可以很清楚的知道不同 tab 所代表的 web page，亦能有效提升使用者體驗。
Url Bar
承襲 Safari 的設計核心 － 有效凸顯 web content 以及統一 OS 操作體驗，所以 mobile Safari 15 把重新設計了主要的呈現效果，我們可以清楚地發現 url bar 已經從傳統一成不變的設計﹙上方呈現﹚，調整為 viewport 下方呈現。
其實她不單單是單純的 url bar 而已，她更昇華為多功能 bar，使用者可以直接在上頭左右 swipe 便可以快速的切換不同的 tab，其流暢的操作就如同 home indicator 一樣方便且流暢，讓我們見證了 Apple design 不是坐領乾薪，而是確確實實以 user 為核心來進行產品設計。
這項嶄新的變革，確確實實打到了 developers 心中最軟的那一塊，畢竟現在已經有成千上萬的 CTA ﹙Call To Action﹚是固定在 viewport 最下方，如果不做些處理的話，那麼 CTA 勢必會和 url bar 重疊在一起，造成大部分可點擊區域被 url bar 遮掉無法點擊的窘境。
乍看之下，這件事情好像很大條，畢竟 CTA 如果無法正常發揮它的效果，對 EC 來說勢必會造成一定程度的影響，對使用者來說也絕對會是一個非常差的體驗，不過～Url Bar 的設置其實也是承襲了以往的設計思維，如果您的 web page 早就已經是 iPhone X design ready，那麼…便無需煩惱 web page 需要做調整，因為她也是架構在系統環境變數 safe-area-inset-* 之上。
我們可以先來複習一下 Designing Websites for iPhone X 這篇文章，早期因為 iPhone X 瀏海以及 home indicator 的設計，所以 Apple 早就預留了系統 safe area 的設計核心，你可以將你的 web page 做滿版的設計，不過請預留 safe area for OS 使用，如果有顯示位置上重疊，則請有效避開，避免出現點擊區域被屏蔽的窘境產生。
如上圖所示，紅色的區塊便是系統設置 safe area，web page 在切版的時候可以透過 CSS Variable > env(safe-area-inset-*) 來取得各區塊塊所佔用的尺寸，再搭配 位置 / 間隔 / 位移 等 CSS 屬性來讓 CTA 做出相對應的變化。便可以立馬完成 safe area ready 的最佳呈現。
如上圖所示，換成 mobile Safari 15 後，url bar 實際上所佔用的高度便可以透過 env(safe-area-inset-bottom) 來取得。
設置方法如下所示，先針對 meta[name=viewport] 新增 viewport-fit 屬性，default 為 auto，如果想要針對滿版設計的話，請換成 cover 便可以有效使用滿屏螢幕。
<meta
name='viewport'
content='...,viewport-fit=auto'
/>接下來可以搭配 CSS Variable 的使用，將 env(safe-area-inset-*) assign 給其他變數，這是避免不支援 env(safe-area-inset-*) 的瀏覽器會發生解析錯誤的狀況發生。
<style>
:root {
--safe-area-left: 0;
--safe-area-right: 0;
--safe-area-top: 0;
--safe-area-bottom: 0;
}@supports (bottom: env(safe-area-inset-top)) {
:root {
--safe-area-left: env(safe-area-inset-left);
--safe-area-right: env(safe-area-inset-right);
--safe-area-top: env(safe-area-inset-top);
--safe-area-bottom: env(safe-area-inset-bottom);
}
}
</style>
最後就是針對 CTA 或者是固定在 viewport 的 module 做出 位置 / 間隔 / 位移 等 CSS 屬性的變化︰
<style>
#header {
padding-top: calc(1em + var(--safe-area-top));
}#footer {
bottom: calc(1em + var(--safe-area-bottom));
}
</style>
完成以上設置後，恭喜您～您的 web page 已經是 Safari 15 ready 了。
Visual intelligence
這是 Safari 所推出的新功能，如果 web content > image 上頭有文字的話，Visual intelligence 便會發揮出類 OCR 的功能，將其解析出來讓 user 可以直接選取並且進行後續的操作。
筆者覺得這功能真的很棒耶！可以大大提升 mobile 上輸入文字的窘境，更讓圖片的可讀性昇華。
目前並沒有設置任何的 flag 可以快速地開啟或者關閉這項功能，如果圖片有版權限制或者不想如此輕易的被 parse，目前唯一的調整方式就是在 html 結構上多壓制一層 layer，方可避免。
<style>
.visual-intelligence--off {
position: relative;
}.visual-intelligence--off:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 1;
}
</style><div class="visual-intelligence--off">
<img
src="image_path.png"
width="1"
height="1"
class="cover"
/>
</div>
CSS Support
以下為此次 CSS 的支援，除了 Aspect Ratio / Flexbox Gaps 讓人感到驚艷外，大多屬於既有 bug 的修正以及功能追趕拉齊，當中亦有一些自己任性率先支援的特有屬性。
如果真心想要使用這些屬性，筆者建議可以透過 CSS > supports 來判斷當前瀏覽器是否支援，避免瀏覽器解析錯誤影響到其他 style 的配置。
@supports (translate: 0) {
/* Individual transform properties are supported */
div {
translate: 100px 100px;
}
}@supports not (translate: 0) {
/* Individual transform properties are NOT supported */
div {
transform: translate(100px, 100px);
}
}
form controls
Safari 終於支援了 input[type=datetime]、input[type=date]、input[type=time] 這類 form element 的互動行為，早期總是要針對 Safari 來做一些 polyfill 的功能補強，如今，終於可以透過 native support 來使用這些 form element 了，達到效能上的最佳調校。
此外，亦強化了 input[type=color] 的 UI 與操作，讓 user 可能有更多面向來使用它～
以上，便是筆者觀看「Design for Safari 15」後的一些個人淺見與情懷抒發，提供給大家參考～