Houdini 的全新 API 提供更聰明的自訂屬性

CSS 中的轉場效果和資料保護

Sam Richard

CSS 自訂屬性 (又稱 CSS 變數) 可讓你在 CSS 中定義自己的屬性，並在整個 CSS 中使用這些屬性的值。雖然這些屬性在現今非常實用，但也有缺點，可能導致難以使用：這些屬性可接受任何值，因此可能會意外遭到非預期的值覆寫；這些屬性一律會從父項繼承值，而且您無法轉換這些屬性。有了 Houdini 的 CSS 屬性和值 API 第 1 級 (Chrome 78 現已提供)，這些缺點將不復存在，CSS 自訂屬性將變得非常強大！

什麼是 Houdini？

在介紹新 API 之前，我們先快速瞭解 Houdini。CSS-TAG Houdini 工作小組 (又稱 CSS Houdini 或 Houdini) 的宗旨是「開發相關功能，說明網頁樣式和版面配置的『魔法』」。Houdini 規格集合旨在開放瀏覽器算繪引擎的強大功能，讓您深入瞭解樣式，並擴充算繪引擎。有了這項功能，您終於可以在 JavaScript 中輸入 CSS 值，並填補或發明新的 CSS，而不會影響效能。Houdini 有望在網路上激發無限創意。

CSS 屬性和值 API 第 1 級

CSS 屬性和值 API 第 1 級 (Houdini 屬性和值) 可讓我們為自訂屬性提供結構。以下是使用自訂屬性時的現況：

.thing {
  --my-color: green;
}

由於自訂屬性沒有型別，因此可能會以非預期的方式遭到覆寫。舉例來說，假設您使用網址定義 --my-color，會發生什麼情況？

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

在這裡，由於未輸入 --my-color，因此系統不知道網址不是有效的顏色值！如果使用，系統會改用預設值 (color 為黑色，background 為透明)。透過 Houdini 屬性和值，可以註冊自訂屬性，讓瀏覽器知道應該是什麼！

現在，自訂屬性 --my-color 已註冊為顏色！這會告知瀏覽器允許哪些類型的值，以及如何輸入和處理該屬性！

已註冊的屬性剖析

註冊屬性的方式如下：

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

它支持下面的選項：

name: string

自訂屬性的名稱。

syntax: string

如何剖析自訂屬性。如需可能值的完整清單，請參閱 CSS 值和單位規格。預設為 *。

inherits: boolean

是否會沿用上層的值。預設值為 true。

initialValue: string

自訂屬性的初始值。

深入瞭解 syntax。有效選項包括數字、顏色和 <custom-ident> 類型。您也可以使用下列值修改這些語法

  • 附加 + 表示接受以空格分隔的語法值清單。舉例來說，<length>+ 會是以空格分隔的長度清單
  • 附加 # 表示接受以半形逗號分隔的值清單，舉例來說，<color># 會是以半形逗號分隔的顏色清單
  • 在語法或 ID 之間加入 |，表示提供的任何選項都有效。舉例來說，<color># | <url> | magic 可接受以半形逗號分隔的顏色清單、網址或 magic 一詞。

注意事項

Houdini 屬性和值有兩項注意事項。首先，定義屬性後就無法更新現有的已註冊屬性，嘗試重新註冊屬性會擲回錯誤，指出屬性已定義。

其次，與標準屬性不同，系統在剖析已註冊的屬性時不會進行驗證。而是在計算時驗證。也就是說，檢查元素屬性時，無效值不會顯示為無效，而且在有效屬性後加入無效屬性時，不會回復為有效屬性；不過，無效屬性會回復為已註冊屬性的預設值。

為自訂屬性加上動畫效果

註冊的自訂屬性除了提供型別檢查之外，還有一項有趣的額外功能：動畫效果！基本動畫範例如下所示：

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

將游標懸停在按鈕上時，按鈕會從紅色動畫變為綠色！如果未註冊屬性，屬性會從一種顏色跳到另一種顏色，因為未註冊時，瀏覽器不知道一個值和下一個值之間會發生什麼情況，因此無法保證能夠轉換這些值。不過，這個範例可以進一步製作 CSS 漸層動畫！以下 CSS 可使用相同的已註冊屬性編寫：

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

這會為 linear-gradient 中的自訂屬性製作動畫，進而為線性漸層製作動畫。請參閱下方的 Codepen，查看完整程式碼的實際運作情形，並自行試用。

結論

Houdini 即將在瀏覽器中推出，屆時您將能以全新的方式使用及擴充 CSS。隨著 Paint API 推出，以及現在的自訂屬性和值，我們的創意工具箱不斷擴充，讓我們能夠定義型別 CSS 屬性，並使用這些屬性建立和製作新的精彩設計動畫。此外，我們也即將在 Houdini 問題佇列中推出更多功能，歡迎提供意見回饋，並瞭解 Houdini 的後續發展。Houdini 的存在是為了開發相關功能，說明網頁上樣式和版面配置的「魔法」，因此請善用這些神奇功能。

相片來源：Maik Jonietz 發表於 Unsplash