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 值，並且在無需犧牲效能的情況下，使用 polyfill 或發明新的 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 的一部分自訂屬性建立動畫，進而為線性漸層建立動畫。請查看下方的 Glitch，瞭解完整程式碼的運作方式，並自行操作。

結論

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

相片來源：Unsplash 上的 Maik Jonietz