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

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

CSS 自訂屬性 (也稱為 CSS 變數) 可讓您在 CSS 中定義自己的屬性,並在整個 CSS 中使用這些屬性的值。雖然目前非常實用,但也有缺點,可能會導致難以使用:可接受任何值,因此可能會意外覆寫為其他值;一律從父項繼承值;無法轉換。有了 Houdini 的 CSS 屬性和值 API 級別 1,現在可在 Chrome 78 中使用,這些缺點已克服,CSS 自訂屬性也變得非常強大!

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