Introduction
CSS 一直是撰寫 web page 最有趣的要素之一，透過它的畫龍點睛總能讓網頁更加的生動、活潑有趣～近年來 CSS 除了在呈現上有了驚人的突破，更在其他領域做出了卓越貢獻，比方說透過 pseudo class 讓一些互動效果可以在 non JavaScript support 下完成，大大的減少了 JavaScript init 的 effort，除此之外，更有一些有趣的屬性可以達到 render performance 的卓越提升，讓整個 user experience 可以昇華至另一境地。真的是起了畫龍點睛的不凡效果～
雖然說 Safari 的升版還是綁在 OS upgrade level 上，不過他這兩年來的步伐似乎比較大了，也開始廣泛的支援了 W3C 所制訂出來的標準，恰巧這場 talk 是一位我蠻喜歡的講者 Jen Simmons 主講，她是一位個性鮮明的人代表人物，更是一位不喜歡被說 new IE 的佈道師。詼諧逗趣的風格以及鮮明的範例展示很是讓聽眾快速地融入相關的情境當中，並且快速地吸收的新知，充滿了個人魅力～
以下仍會以影片步調鋪陳為主，再導入一些個人見解，讓讀者們可以更容易進入狀況。
Powerful Layouts
排版這檔事兒一直都是 CSS 的強項，為了讓 web page 的呈現可以更加多元，所以有了 flex 以及 grid 滿足天馬行空的想法。
- masonry layout
Pinterest 問世以來最讓人驚艷的莫過於是它的 masonry layout，藉由不同的 column 來排列出從左到右，從上到下的內容排列。
很多 website 競相模仿，皆是需要透過 JavaScript 加工以及輔助才能達到如次的呈現，每每一有 window size 的變化便需要重新進行運算以及 scrollTop 的調整，可以說工程非常浩大。
Layout really blones in CSS.
如上所示，只要 grid-template-rows 設置為 masonry，那麼當我們不斷地插入內容區塊時，便會依照我們想要的流向進行排列。
有了這項支援後，web developers 再也不需要透過 JavaScript 或是進行加工或是進行事件監，便可以有驚人亮眼的呈現效果，更可以藉此玩些花式。
如上所示，除了 column 1 （從左到右）是固定的 10rem 寬度，column3 取 100px ~ 300px 的寬度， 剩下的寬度就留給 column 2 自行運用。
簡單的 CSS 設定便可以立馬完成這麼有趣的呈現效果真的是令人嘖嘖稱奇，不過 masonry layout 其實已經不是那麼流行了，個人覺得吸引力真的不高～
有興趣的朋友可以搭配 CSS supports 來做，讓有支援的瀏覽器便能有 masonry layout 效果。
- margin-trim
相信大家在排版上總會遇到 container 和 child margin 互卡的問題，總是需要一方讓步或者設定負值往上頂。
因為 container padding 和 child margin 可能相會作用運算，所以最後呈現的效果可能就不如預期，有可能變得比預期的還要厚實。
所以可能需要針對 :first-child / :last-child 的 style 進行抵銷
有了 margin-trim，只要在 container 進行宣告，可以讓 child 維持既有的 margin 設定而不會有不預期的 layout 厚實現象發生。
對於 layout 排版來說真的友善且方便許多。對 web developers 來說是一大福音～
Dynamic Color
以前礙於軟、硬體技術問題，所以大多 web page 都還是基於 sRGB 色域進行設置，久而久之大家也都習慣這樣的 pattern 與 apply。不過現在的 display 其實可以表現得更加亮眼，這也是為什麼 apple 從開始支援 HEIC 格式的照片時就已經廣推 Display P3。 透過 iPhone 所拍攝出來的照片（HEIC）觀察其 color profile 就可以知道它用上了 Display P3。再加上現在的 display 都很強大，確實是有機會在 web page 中落實這比 sRGB 強上 50% 的 Display P3 了。（想知道怎麼導入 Display P3 素材到 web page 的話，也可以參考這篇: How to start designing assets in Display P3）
既然硬體已經支援了，那麼基於 sRGB 所設計的 CSS color method 自然亦需要進行進化，才有機會使用到 Display P3 中所涵蓋到的顏色。老實說我個人蠻好奇究竟這世上是有多少血輪眼可以看出與 sRGB 的差異。
現在有個 media query 可以偵測當前 display 是否支援 Display P3 色域，如範例所示，若支援則將 .main 的背景換成 Display P3 格式的圖片。算是一種漸進式的 migration。
以下便是基於 sRGB 所設計的各種 CSS color 表示法，當中有 alias、hex 以及各種 method，相信大家都不陌生。
上面這些表示法都無法直接表示到 Display P3 中特有的顏色，為了要可以表示這些特有顏色，CSS 又制定了下列四個新的表示法，分別是 LCH、OKLCH、LAB 以及 OKLAB。
LCH 以及 OKLCH 分別由 Lightness、Chroma 以及 Hue 所組成。
LAB 以及 OKLAB 則由 Lightness、A axis 以及 B axis 所組成。
以下便是展示如何透過這四個新的表示法來表現對應的顏色。
另外我們也可以用 CSS color method 來指定顏色。
- Relative color syntax
這東西好猛，可以從既有的顏色進行變化衍生成我們想要的顏色。
如上範例所示，分別用不同的 color models 來做不同的變化，還可以搭配 calc 來做不同的變化，真的是超級猛！！
- Gradient-interpolation color spaces
我們常用的漸層 method 現在多了新的支援，developer 可以在既有的 syntax 前面多加 color space 的定義就可以衍生不同的漸層變化。
如上所示，便是定義了以 hwb 為 color space 進行變化。
- Color mix
這是一個全新的 method，藉由它可以將不同的顏色即時地進行 mix 運算來變化成一個新的顏色，對於圖片後製以及繪圖的前端服務來說應該是一大福音。
有了 color-mix() 的支援，就可以有些不同的玩法了。如下所示，.card 是由 透明度 30% 的白色和透明度 30% 的藍色來混，最後出來的顏色就會是 60% 透明度的藍白色。
另外也可以透過 CSS alias: currentcolor 來指向當前的顏色進行變化。範例的 currentcolor 便是指向 oklch(35% .5 140)。
以上便是 Safari 針對 color 所衍生出來的各種支援，實際上在使用前，還是得視情況看看 OS、browser 以及對應的 Web API 是否有支援，避免衍生出不必要的誤會～
Productive Selectors
透過 CSS selector 的支援總能讓我們快速的選到欲進行變化的 elements，如果有釋放出新穎的 pseudo class 或者 pseudo element 的話，則可以進行的變化便愈加寬廣～
- :user-valid & :user-invalid
這是一個新穎的 pseudo class，一般來說 web developer 可以使用 :valid & invalid 針對 user 對於當前 form element 的輸入狀態進行提示。以下範例便是針對 [type=email] 來進行樣式變化。當使用者 key 的內容不正確的時候，便會呈現對應的紅色框線以及錯誤 icon。
不過我們可以發現，它會在 user input 的當下即時變化，有就是說樣式的變化可能會像中風一樣不斷地切換來、切換去。對於使用者體驗來說實在是不好。這就是為什麼 :user-valid & :user-invalid 會誕生的主要原因。
:user-valid & :user-invalid 就像是針對這個 input filed 掛上 event，唯有 user 完成輸入且離開這個 input 才會進行狀態偵測並做出相對應的樣式變化。
- :has()
一般來說，CSS selector 一直都是由左指到右，不過有些時候 web developer 需要的是滿足特定狀態才針對 container 或者 child 進行樣式變化，有了:has() support 後，這一切便有機會可以實現了～
Safari 此次的更新更讓 :has() 有更強大的支援，如下所示，web developer 可以針對特定的語系、以及 video / audio 的狀態變化進行不同的樣式變化。真真希望其他瀏覽器也可盡快跟上這些進化～
- :dir()
如同其名這便是針對 language direction 所做的 pseudo class，可以針對特定的 language direction （LTR or RTL）來做細部微調或者樣式改寫。
搭配 CSS logical properties 來使用的話，更是如虎添翼～讓同一套 CSS 可以有更多元的支援。
有些時候可能 CSS logical properties 無法那麼完美支援的部分，便可以透過 :dir() 來輔助了。
Typography advancements
Apple 真的很注重細節，每次新穎的支援總少不了 text 以及 color 的支援，藉由這些樣式支援，讓 visitor 的瀏覽體驗可以昇華至全新的境地～
- Line-height units
這是一個全新的單位，由 line-height 為 base 進行變化。CSS 的單位五花八門，每每一段間就會有新穎的支援，如下圖所展示基於 viewport 變化的 svh 以及 lvh，和針對 container queries 變化的 cqi （container’s inline-size）以及 cqb（container’s block-size）。
針對 text 的 relative units 現階段有下列的支援。
如今多了以下支援～
有就是說 web developer 可以透過 root line-height 設置，讓旗下的 child 可以透過 rlh 來取得對應的單位變化，一旦針對 root line-height 進行調整，便可以維持同等比例的呈現藉此維持相同的瀏覽體驗。
從下圖實際呈現，便可以看到 render 出來後的樣式就如同 CSS 所設置的數值（section padding 為 2 倍行高，h1 以及 p 的垂直 margin 為 1 倍行高）。
- Font size adjust
font-size 的設定總是一門學問，畢竟不同字型所呈現出來的 font-size 可能不是那麼盡如人意，更不用說同一段文字裡頭如果隱含不同的 font-family，那麼對應的 font-size 可能就不能設置相同的數值，不然就會早成閱讀上差評體驗。
如上圖，不同的 font-family 雖然有著相同的 font-size，但是視覺上的感受就是不同。
為了讓不同字型在呈現上的差異儘可能的減小，所以 web developer 可能就需要進行微調，讓不同 font-family 於呈現上大小差異不要那麼突兀。
現在有了 font-size-adjust 後，我們便可以透過它來跟瀏覽器說我希望不同字型併行呈現時應該做的 font-size 變化，再也不用針對特定的 element 進行調整，讓 maintenance 的工可以降至最低。
如上所示，當兩個字型都正常 load 完且完成 render 後，看起來變舒服許多～至於 .47 是怎麼得來的呢？
根據大數法則，一般常用的 latin 比例除出來約莫就是 .47，這也就是範例中為什麼設定 font-size-adjust 為 .47 的主要原因，若使用到不同語系的字型可能就需要 web developer 理出最適宜的數值了～
要理出這個最適宜的比例可能不是那麼容易，所以 Safari 17 打算導入一個 alias 的 value 來簡化 web deveoper 的工。
透過 from-font 的設置，讓瀏覽器幫我們理出最適宜的比例。
另外也可以透過 two-value syntax 來告訴瀏覽器要針對哪一個 metric 進行變化（default is ex-height）。
- Text-box trim
它有類似 margin-trim 的作用，用來消除一些 web developer 不想要的 white space。
如上展示，設計主要想要讓 avatar 以及 name 可以垂直置中，不過因為文字 rendering 的關係，實際上的呈現就會有點落差。
再細部觀察，其實 text-box 確實是垂直置中。
但是 text-box 在呈現時，上下所佔用的 space 不盡相同，才導致了無法確切的垂直置中。
text-box-trim 就是為了解決這些問題而生。透過 text-box-trim 的設置來移除不必要的 space。
除了上面範例外，一般我們在作圖文鋪陳時，也會遇到同樣的問題，如下圖所示，Caption 的排列就是無法完美的對齊圖片頂端所延伸出來的基準線。
當然也可透過些校正來讓它們對齊，但這樣的做法不僅不好維護，若有結構上的異動亦需要把對應的調整加上去。
透過 text-box properties 的設置便可以有效的將不必要的 space 進行消除，如同「虹村億泰」的能力一樣，不過目前這只有在 Safari Technology Preview 版本才有支援，未來是否下放到 stable version 仍是未知數。所以在使用上可能要特別留意一下支援度以及寫法。
- Counter styles
透過 list-style 的設置來改變 counter styles。讓 order list element 的呈現可以更加活潑、有趣。
針對 numbering systems 其實有非常多的樣式變化。
不過既有的支援總是無法 cover 的很全面，這也就是 counter style 誕生的主要原因。
透過 counter-style 的定義，web developer 便可以客製化專屬的 list style 出來，用法就和 keyframe animation 的定義雷同。
另外也可以透過其他屬性的設置來讓呈現有更靈活的變化。
相信大家都有過使用 counter-* 的設置以及 pseudo element 搭配，來豐富既有的內容。
如今也可以搭配 counter-style，來進行客製化，讓內容的呈現不再只是傳統的 1 / 2 / 3 ….。
Conclusion
以上便是 What’s new in CSS （WWDC23）內容摘要，除了滿滿的我們多早多早就支援 blah…blah…blah… 的吹噓外，更可以看到 Jen Simmons 花了很多篇幅在 color 以及 typography 上所做的 huge supports。維持了 apple 一慣希望強化 user 的瀏覽體驗初衷。個人覺得這些支援都挺好的，不過實際應用可能就差強人意，畢竟 Display P3 assets 的設置不是那般容易，理論上具備血輪眼的 user 也不是那麼多，性價比上自然就差矣～Anyway，願意動總是件好事，希望本篇文章可以引領大家更快進入 Safari 針對 CSS 所做的點點幾滴滴更新，讓大夥們可以確切的使用情境與運用範疇。
感謝大家的閱讀，希望本篇能確切的幫助到大家～ #WWDC23 #CSS