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 的布道师。诙谐逗趣的风格以及鲜明的范例展示很是让听众快速地融入相关的情境当中，并且快速地吸收的新知，充满了个人魅力～
视频：developer.apple.com/videos/play…
以下仍会以影片步调铺陈为主，再导入一些个人见解，让读者们可以更容易进入状况。
Powerful Layouts
排版这档事儿一直都是 CSS 的强项，为了让 web page 的呈现可以更加多元，所以有了 flex 以及 grid 满足天马行空的想法。
1、masonry layout
Pinterest 问世以来最让人惊艳的莫过于是它的 masonry layout，借由不同的 column 来排列出从左到右，从上到下的内容排列。
很多 website 竞相模彷，皆是需要透过 JavaScript 加工以及辅助才能达到如此的呈现，每每一有 window size 的变化便需要重新进行运算以及 scrollTop 的调整，可以说工程非常浩大。
Safari with CSS masonry layout setting.
如上所示，只要 grid-template-rows 设置为 masonry，那麽当我们不断地插入内容区块时，便会依照我们想要的流向进行排列。
从左到右，从上到下排列.
有了这项支持后，web developers 再也不需要通过 JavaScript 或是进行加工或是进行事件监听，便可以有惊人亮眼的呈现效果，更可以借此玩些花式。
masonry layout with flexable column inline-size.
如上所示，除了 column 1 （从左到右）是固定的 10rem 宽度，column3 取 100px ~ 300px 的宽度， 剩下的宽度就留给 column 2 自行运用。
简单的 CSS 设置便可以立马完成这么有趣的呈现效果真的是令人啧啧称奇，不过 masonry layout 其实已经不是那么流行了，个人觉得吸引力真的不高～
有兴趣的朋友可以搭配 CSS supports 来做，让有支持的浏览器便能有 masonry layout 效果。
2、margin-trim
相信大家在排版上总会遇到 container 和 child margin 互卡的问题，总是需要一方让步或者设定负值往上顶。
因为 container padding 和 child margin 可能相会作用运算，所以最后呈现的效果可能就不如预期，有可能变得比预期的还要厚实。
Try to trim useless spaces.
所以可能需要针对 :first-child / :last-child 的 style 进行抵销
clear
:first-child / :last-child margin style.
有了 margin-trim，只要在 container 进行宣告，可以让 child 维持既有的 margin 设置而不会有不預期的 layout 厚實现象发生。
Container with margin-trim.
对于 layout 排版来说真的友善且方便许多。对 web developers 来说是一大福音～
Dynamic Color
The world is full of 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）
Display P3 color
既然硬体已经支持了，那么基于 sRGB 所设计的 CSS color method 自然亦需要进行进化，才有机会使用到 Display P3 中所涵盖到的颜色。老实说我个人蛮好奇究竟这世上是有多少血轮眼可以看出与 sRGB 的差异。
现在有个 media query 可以侦测当前 display 是否支持 Display P3 色域，如范例所示，若支持则将 .main 的背景换成 Display P3 格式的图片。算是一种渐进式的 migration。
CSS media query:
color-gamut
以下便是基于 sRGB 所设计的各种 CSS color 表示法，当中有 alias、hex 以及各种 method，相信大家都不陌生。
Defining colors in the sRGB color gamut.
上面这些表示法都无法直接表示到 Display P3 中特有的颜色，为了要可以表示这些特有颜色，CSS 又制定了下列四个新的表示法，分别是 LCH、OKLCH、LAB 以及 OKLAB。
More powerful color models.
LCH 以及 OKLCH 分别由 Lightness、Chroma 以及 Hue 所组成。
LCH & OKLCH fields.
LAB 以及 OKLAB 则由 Lightness、A axis 以及 B axis 所组成。
以下便是展示如何透过这四个新的表示法来表现对应的颜色。
Examples for new CSS color models.
另外我们也可以用 CSS color method 来指定颜色。
CSS:
color().
1、Relative color syntax
这东西好猛，可以从既有的颜色进行变化衍生成我们想要的颜色。
Relative color syntax.
如上范例所示，分别用不同的 color models 来做不同的变化，还可以搭配 calc 来做不同的变化，真的是超级勐！！
Examples for relative color syntax.
2、Gradient-interpolation color spaces
我们常用的渐层 method 现在多了新的支持，developer 可以在既有的 syntax 前面多加 color space 的定义就可以衍生不同的渐层变化。
CSS gradient method with color space.
如上所示，便是定义了以 hwb 为 color space 进行变化。
3、Color mix
这是一个全新的 method，借由它可以将不同的颜色即时地进行 mix 运算来变化成一个新的颜色，对于图片后製以及绘图的前端服务来说应该是一大福音。
CSS
:color-mix().
有了 color-mix() 的支持，就可以有些不同的玩法了。如下所示，.card 是由 透明度 30% 的白色和透明度 30% 的蓝色来溷，最后出来的颜色就会是 60% 透明度的蓝白色。
Examples for CSS
color-mix().
另外也可以透过 CSS alias:currentcolor 来指向当前的颜色进行变化。范例的 currentcolor 便是指向 oklch(35% .5 140)。
以上便是 Safari 针对 color 所衍生出来的各种支持，实际上在使用前，还是得视情况看看 OS、browser 以及对应的 Web API 是否有支持，避免衍生出不必要的误会～
Productive Selectors
透过 CSS selector 的支持总能让我们快速的选到欲进行变化的 elements，如果有释放出新颖的 pseudo class 或者 pseudo element 的话，则可以进行的变化便愈加宽广～
1、:user-valid & :user-invalid
这是一个新颖的 pseudo class，一般来说 web developer 可以使用 :valid & invalid 针对 user 对于当前 form element 的输入状态进行提示。以下范例便是针对 [type=email] 来进行样式变化。当使用者 key 的内容不正确的时候，便会呈现对应的红色框线以及错误 icon。
element with
:invaild setting.
不过我们可以发现，它会在 user input 的当下即时变化，有就是说样式的变化可能会像中风一样不断地切换来、切换去。对于使用者体验来说实在是不好。这就是为什么 :user-valid & :user-invalid 会诞生的主要原因。
:user-valid & :user-invalid 就像是针对这个 input filed 挂上 event，唯有 user 完成输入且离开这个 input 才会进行状态侦测并做出相对应的样式变化。
CSS selector:
:user-vaild & :user-invalid.
2、:has()
一般来说，CSS selector 一直都是由左指到右，不过有些时候 web developer 需要的是满足特定状态才针对 container 或者 child 进行样式变化，有了:has() support 后，这一切便有机会可以实现了～
Safari 此次的更新更让 :has() 有更强大的支持，如下所示，web developer 可以针对特定的语系、以及 video /audio 的状态变化进行不同的样式变化。真真希望其他浏览器也可尽快跟上这些进化～
CSS:
:has().
3、:dir()
如同其名這便是針對 language direction 所做的 pseudo class，可以針對特定的 language direction （LTR or RTL）來做細部微調或者樣式改寫。
Different language direction
搭配 CSS logical properties 来使用的话，更是如虎添翼～让同一套 CSS 可以有更多元的支持。
CSS: logical properties.
有些时候可能 CSS logical properties 无法那麽完美支持的部分，便可以透过 :dir() 来辅助了。
Icon rotate with
:dir().
Typography advancements
Apple 真的很注重细节，每次新颖的支持总少不了 text 以及 color 的支持，借由这些样式支持，让 visitor 的浏览体验可以升华至全新的境地～
1、Line-height units
这是一个全新的单位，由 line-height 为 base 进行变化。CSS 的单位五花八门，每每一段间就会有新颖的支持，如下图所展示基于 viewport 变化的 svh 以及 lvh，和针对 container queries 变化的 cqi （container’s inline-size）以及 cqb（container’s block-size）。
svh、lvh & cqi、cqb.
针对 text 的 relative units 现阶段有下列的支持。
text’s relative units.
如今多了以下支持～
lh & rlh.
有就是说 web developer 可以透过 root line-height 设置，让旗下的 child 可以透过 rlh 来取得对应的单位变化，一旦针对 root line-height 进行调整，便可以维持同等比例的呈现借此维持相同的浏览体验。
Examples for rlh unit.
从下图实际呈现，便可以看到 render 出来后的样式就如同 CSS 所设置的数值（section padding 为 2 倍行高，h1 以及 p 的垂直 margin 为 1 倍行高）。
rlh setting & rendering.
2、Font size adjust
font-size 的设定总是一门学问，毕竟不同字型所呈现出来的 font-size 可能不是那麽尽如人意，更不用说同一段文字裡头如果隐含不同的 font-family，那麽对应的 font-size 可能就不能设置相同的数值，不然就会早成阅读上差评体验。
Different font-family with same font-size.
如上图，不同的 font-family 虽然有着相同的 font-size，但是视觉上的感受就是不同。
Apply different font-size for
<code />.
为了让不同字型在呈现上的差异尽可能的减小，所以 web developer 可能就需要进行微调，让不同 font-family 于呈现上大小差异不要那麽突兀。
现在有了 font-size-adjust 后，我们便可以透过它来跟浏览器说我希望不同字型并行呈现时应该做的 font-size 变化，再也不用针对特定的 element 进行调整，让 maintenance 的工可以降至最低。
Container element applied font-size-adjust.
如上所示，当两个字型都正常 load 完且完成 render 后，看起来变舒服许多～至于 .47 是怎麽得来的呢？
why .47 ?
根据大数法则，一般常用的 latin 比例除出来约莫就是 .47，这也就是范例中为什麽设定 font-size-adjust 为 .47 的主要原因，若使用到不同语系的字型可能就需要 web developer 理出最适宜的数值了～
要理出这个最适宜的比例可能不是那麽容易，所以 Safari 17 打算导入一个 alias 的 value 来简化 web deveoper 的工。
font-size-adjust with “from-font”.
透过 from-font 的设置，让浏览器帮我们理出最适宜的比例。
font-size-adjust with two-value syntax.
另外也可以透过 two-value syntax 来告诉浏览器要针对哪一个 metric 进行变化（default is ex-height）。
Use different metric for font-size-adjust.
3、Text-box trim
它有类似 margin-trim 的作用，用来消除一些 web developer 不想要的 white space。
Make avatar & name vertical center.
如上展示，设计主要想要让 avatar 以及 name 可以垂直置中，不过因为文字 rendering 的关係，实际上的呈现就会有点落差。
Text is visually lower than center.
再细部观察，其实 text-box 确实是垂直置中。
Text-box is really vertical center.
但是 text-box 在呈现时，上下所占用的 space 不尽相同，才导致了无法确切的垂直置中。
Different space above and below the letters.
text-box-trim 就是为了解决这些问题而生。透过 text-box-trim 的设置来移除不必要的 space。
What text-box-trim do.
除了上面范例外，一般我们在作图文铺陈时，也会遇到同样的问题，如下图所示，Caption 的排列就是无法完美的对齐图片顶端所延伸出来的基準线。
Another case for extra space.
当然也可透过些校正来让它们对齐，但这样的做法不仅不好维护，若有结构上的异动亦需要把对应的调整加上去。
CSS:
text-box properties.
透过 text-box properties 的设置便可以有效的将不必要的 space 进行消除，如同「虹村亿泰」的能力一样，不过目前这只有在 Safari Technology Preview 版本才有支持，未来是否下放到 stable version 仍是未知数。所以在使用上可能要特别留意一下支持度以及写法。
4、Counter styles
透过 list-style 的设置来改变 counter styles。让 order list element 的呈现可以更加活泼、有趣。
CSS: list-style.
针对 numbering systems 其实有非常多的样式变化。
Styles for different numbering systems.
不过既有的支持总是无法 cover 的很全面，这也就是 counter style 诞生的主要原因。
CSS:
counter-style.
透过 counter-style 的定义，web developer 便可以客製化专属的 list style 出来，用法就和 keyframe animation 的定义雷同。
CSS:
counter-style.
另外也可以透过其他属性的设置来让呈现有更灵活的变化。
Example for counter-style with emoji.
相信大家都有过使用 counter-* 的设置以及 pseudo element 搭配，来丰富既有的内容。
CSS:
counter-* with pseudo element.
如今也可以搭配 counter-style，来进行客製化，让内容的呈现不再只是传统的 1 / 2 / 3 ….。
CSS: counter-* with counter-style.
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
Reference
- What’s new in CSS
- Jen Simmons’s tweet（the new IE）
- Pinter
- How to start designing assets in Display P3
- CSS Logical Properties and Values
