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

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

Sam Richard

CSS 自訂屬性又稱為 CSS 變數，可讓您在 CSS 中定義自己的屬性，並且在 CSS 中使用這些值。雖然目前在處理上非常有用，但仍有缺點，可能會難以使用：它們可能會取得任何值，因而意外遭到意外覆寫，但這些物件一律會沿用父項的值，而且您無法轉換。有了 Houdini 的 CSS 屬性和值 API 級別 1，現在可在 Chrome 78 中使用，這些缺點已克服，CSS 自訂屬性也變得非常強大！

什麼是 Houdini？

在討論新的 API 之前，讓我們先快速瞭解 Houdini。CSS-TAG Houdini Task Force 也稱為 CSS Houdini (或簡稱 Houdini)，旨在「開發實用功能，解釋網路上的樣式和版面配置。」Houdini 規格集合旨在發揮瀏覽器轉譯引擎的強大功能，讓您深入瞭解我們的樣式，並擴充轉譯引擎。透過這個方式，只要在 JavaScript 和 polyfill 中輸入 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 字詞。

哥特斯隊 (Gotchas)

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 中的自訂屬性建立動畫，進而為線性漸層加上動畫效果。請查看下方的 Glitch，瞭解完整程式碼的運作方式，並自行操作。

結論

Houdini 即將在瀏覽器上推出，屆時將帶來全新的 CSS 操作和擴充方式。Paint API 已推出，現在又有自訂素材資源和值，我們的創意工具箱也隨之擴大，讓我們定義 CSS 屬性類型，並使用這些屬性建立和製作全新的動畫設計。在 Houdini 問題佇列中，您還可以提供意見回饋，並查看 Houdini 的後續發展。Houdini 的存在目的是開發可說明網站樣式和版面配置「魔法」的功能，因此請盡情發揮這些神奇功能的效用。

相片來源：Unsplash 上的 Maik Jonietz