Google 整理的 2024 年新的 CSS 語法 Part 2

承上篇 Google 整理的 2024 年新的 CSS 語法 Part 1，再來看剩下來的部分。

Developer Experience

本篇將會提到以下的內容：

• 背景繼承的簡化：讓處理背景樣式變得更直觀。
• 神奇的顏色函式 light-dark()：輕鬆應對光暗模式切換。
• 更安全且更智慧的變數 @property：可自定義的 CSS 屬性，提升靈活性與可控性。
• 指定轉場的初始樣式：讓轉場動畫有更精確的起點。
• 進入頂層（top-layer）的新方法：簡化管理疊層上下文的流程。
• 改進的注音對齊（ruby alignment）：讓文字與注音排版更整齊。
• 文字描邊與填充的分層選項：同時調整文字描邊（text stroke）與文字填充（text fill）。
• 更多放寬 CSS 巢狀語法的方式：讓巢狀規則更直觀且容易使用。

這些新功能不僅提升了 CSS 的強大性，也為開發者提供了更多創作的自由與彈性！

Backdrop Inheritance

歷史上，::backdrop 偽元素並不繼承任何屬性。然而，從 Chrome 122 開始，::backdrop 偽元素已被轉換為樹狀結構中的元素，這表示它現在會繼承來源元素的任何可繼承屬性。

由於這項變更，現在可以在特定元素上覆寫自定義屬性的值，而 ::backdrop 也能存取這些屬性。例如，與開啟的 <dialog> 元素關聯的 ::backdrop 現在可以存取該 <dialog> 中可用的自定義屬性。

light-dark()

CSS 中的系統顏色可以根據當前使用的 color-scheme 值進行調整。例如，如果在 CSS 規則中聲明 color: CanvasText，則匹配元素的文字顏色會根據 color-scheme 的值顯示為淺色或深色。

在以下的範例中，可以使用下拉選單來控制 <div> 的 color-scheme。由於該 <div> 是使用系統顏色進行樣式設定的，因此可以支援淺色和深色的樣式。

light-dark() 函式為開發者提供了相同的功能。此函數接受兩個參數，且這兩個參數都必須是 <color> 值。

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

透過改變 color-scheme 的值，light-dark() 函式會使用第一個或第二個顏色值：

• 如果使用的色彩方案為 淺色 或 未知，則回傳第一個顏色的計算值。
• 如果使用的色彩方案為 深色，則回傳第二個顏色的計算值。

• “Easy Light-Dark Mode Color Switching with light-dark()” article on bram.us
• light-dark() on MDN

@property

2024 年標誌著 @property 終於成為 CSS Baseline 的一部分，並正式可用。@property 的跨瀏覽器支援是一個令人振奮的里程碑。透過 @property 和對應的 CSS.registerProperty，開發者可以註冊自定義屬性，設定其類型、控制繼承行為，並為其指定初始值。

@property --myColor {
  syntax: '';
  inherits: false;
  initial-value: hotpink;
}

透過將自定義屬性註冊為特定類型，瀏覽器可以在過渡和動畫中正確地插值這些屬性的值。

藉由動畫化自定義屬性，您的 CSS 不僅更簡潔，還更易於閱讀。例如，以下範例展示了如何將 --angle 屬性從 0deg 動畫化到 360deg：

@property --angle {
  syntax: '';
  initial-value: 0deg;
  inherits: false;
}

@keyframes adjust-angle {
  to {
    --angle: 360deg;
  }
}

div {
  --angle: 0deg;
  animation: 10s adjust-angle linear infinite;
  rotate: var(--angle);
}

• @property goes baseline
• Benchmarking the performance of CSS @property
• Exploring @property and its Animating Powers

The Popover API

Popover API 提供了一種構建分層界面的方式，例如工具提示（tooltips）、選單、教學界面等。

要以預設值建立一個彈出視窗（popover），只需準備一個按鈕來觸發彈出視窗，以及一個作為彈出視窗的元素。例如：

Popover API 內建支援以下功能，讓開發更方便且符合現代標準：

1. 頂層顯示（Top Layer Promotion）
   彈出視窗會自動提升至頂層，確保其不被其他內容遮蓋，提升可見性。

2. 輕量解散功能（Light-Dismiss Functionality）
   使用者可以點擊彈出視窗外的區域或按下鍵盤的 Esc 鍵來輕鬆關閉視窗，無需額外程式碼處理。

3. 預設焦點管理（Default Focus Management）
   彈出視窗打開時，自動將焦點移至彈出視窗的內容，提升使用體驗和鍵盤操作的流暢度。

4. 無障礙功能（Accessibility Features）
   內建 ARIA 支援，確保彈出視窗對屏幕閱讀器等輔助技術可用，例如自動處理 aria-expanded 和 aria-hidden 屬性。

這些功能使得 Popover API 成為構建互動界面（例如工具提示、選單或教學提示）的理想選擇，並減少了手動實現這些行為所需的程式碼量。

Entry effects with @starting-style

@starting-style 規則用於定義元素在首次接收樣式更新之前的樣式。當針對目標屬性設定 CSS 過渡（transitions）時，可以利用這些起始樣式創建進場效果。

 以下範例展示了新添加的 <div> 元素如何從黃色淡化到其初始背景顏色（透明）：

div {
  transition: background-color 0.5s;
  background-color: transparent;

  @starting-style {
    background-color: yellow;
  }
}

另一個使用範例是為對話框（dialog）添加進場動畫效果，當對話框打開時實現平滑的進場過渡。 

dialog[open] {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
}

當動畫涉及到 離散可動畫屬性（例如 display）時，別忘了將 transition-behavior 設定為 allow-discrete。這樣可以讓瀏覽器正確處理這些屬性的過渡行為。

Using @starting-style and transition-behavior for enter and exit stage effects 

Line-breakable <ruby> + CSS ruby-align

從 Chrome 128 開始，注音標註（ruby annotations）支援換行，並且可以透過 CSS 屬性 ruby-align 來設置注音文字的對齊方式。這提供了更精細的控制，可以更好地展示注音或附加信息，例如使用 <ruby> 元素的標註文本。

關於換行的改進：

• 之前：如果注音標註過長，它們無法隨著基礎文字換行，可能導致排版問題或文字重疊。
• 之後：換行後的注音標註會正確對應換行後的基礎文字，實現更理想的文字渲染效果。

新的 CSS 屬性 ruby-align 用於控制 ruby 基礎文字（base text）與 注音文字（annotation text）的對齊方式。該屬性接受以下關鍵字值：

值與效果：

1. space-around

   • 注音文字會在基礎文字的左右均等分配空間。
   • 整體呈現更均衡的分佈，適合較短的注音。

2. space-between

   • 注音文字會平均分佈在基礎文字的兩端，左右貼齊。
   • 適合強調對齊效果的情境。

3. start

   • 注音文字與基礎文字的起始對齊（靠左或靠右，取決於書寫方向）。
   • 適用於標註系統強調起始對齊的格式。

4. center（預設值）

   • 注音文字會與基礎文字居中對齊。
   • 提供簡單且美觀的效果，適合大多數情境。

<ruby>
  注音範例
  <rt>zhù yīn</rt>
</ruby>

ruby {
  ruby-align: space-between; /* 可選值：space-around, start, center */
  font-size: 1em;
  line-height: 1.5;
}

rt {
  font-size: 0.8em;
  color: gray;
}

注意事項：

• 跨行注音處理：ruby-align 的設定也會影響注音文字在多行基礎文字中的分佈。
• 瀏覽器支援：從 Chrome 128 開始支援，其他現代瀏覽器可能需要檢查兼容性。

paint-order

使用 text-stroke 時，可以透過 paint-order 屬性來控制文字填充（fill）與描邊（stroke）的堆疊或渲染順序。這在希望確保描邊被渲染在填充之上時特別有用。

預設的繪製順序為：填充（fill）→ 描邊（stroke）→ 標記（markers）。

以下的展示了若文字先填充為白色再添加黑色描邊時，可能會出現不理想的效果。將順序調換，使描邊先被繪製，再填充文字，結果會更佳！

要實現這個效果，只需要一行 CSS：將 paint-order 屬性設定為先描邊後填充，指定關鍵字的順序如下：

h1 {
  paint-order: stroke fill;

  color: white;
  -webkit-text-stroke: 5px black;
}

 「paint-order」的加入大大提升了 text-stroke 在實際專案中的可用性。過去，text-stroke 的限制主要在於它缺乏細緻的控制，尤其是填充和描邊的順序固定，無法避免某些視覺上不理想的效果。例如，描邊被填充覆蓋的情況，經常導致文字設計看起來不精緻。

有了 paint-order 屬性後，開發者可以靈活控制填充與描邊的順序，避免上述問題，並實現更細膩的設計效果。這使得 text-stroke 不僅能用於裝飾性設計，也更適合生產環境中需要精確設計的場景。

總結來說，paint-order 的出現確實讓 text-stroke 更實用、更值得信賴，特別是在創建高品質的視覺效果時。這是一個很實用的 CSS 功能進步！

CSSOM Nested Declarations

CSS 的嵌套功能在設計上遇到了一些奇怪的行為，為了解決這些問題，CSS Nesting 規範中新增了 CSSNestedDeclarations 介面。透過這個改進，位於樣式規則之後的宣告不再會「向上移動」，從而更符合預期的行為。

例如，以下的 CSS 程式碼：

.foo {
  color: red;
  &.bar {
    background-color: green;
  }
  background-color: red;
}

在未採用 CSSNestedDeclarations 的情況下，.foo 的背景色會是 紅色，因為最終的背景色宣告會「提升」並覆蓋內部規則。

引入 CSSNestedDeclarations 介面後，背景色的處理會按照預期運作，.foo 的背景色會是 綠色，因為內部的樣式規則正確地分層，外部的背景色宣告不會再干擾內部規則。

這項更新讓 CSS 的嵌套邏輯更直觀，並減少了意外行為的發生，對於開發者來說是一項非常有用的改進！

以上就是 2024 年 google 提示的 CSS 新的語法，應該都能在中按的開發上幫助到大家。

原文：
CSS Wrapped 2024