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

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

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

在討論新的 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