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

CSS 中的轉換和資料保護

CSS 自訂屬性 (又稱為 CSS 變數) 可讓您在 CSS 中定義自己的屬性,並在 CSS 中使用相應值。雖然現今非常實用,但這些缺點卻讓他們難以使用:可以接受任何值,以免不小心覆寫了非預期的內容,而且這些物件一律會繼承父項的值,且您無法轉換。Chrome 第 78 版現已推出 Houdini 的 CSS Properties 和 Values API 級別 1,因此這些缺點會大幅出現,大幅改善 CSS 自訂屬性的功能!

什麼是 Houdini?

開始介紹新的 API 之前,我們先來快速介紹 HoudiniCSS-TAG Houdini Task Force 又稱為 CSS Houdini 或 Houdini),旨在「開發可說明網路上樣式和版面配置的『魔術』的『魔術』功能」。 我們設計出一系列的 Houdini 規格,能夠擴充瀏覽器的算繪引擎,讓使用者能更深入瞭解我們的樣式,並擴充轉譯引擎的功能。如此一來,即使在沒有效能命中的情況下,在 JavaScript 中輸入的 CSS 值和在聚填入法或新 CSS 中也可以發明。Houdini 擁有 網路創意的潛力

CSS Properties and Values API 級別 1

CSS Properties and Value API 級別 1 (Houdini Props 和 Vals) 可讓我們為自訂屬性設定結構。使用自訂屬性時的目前情況如下:

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

由於自訂屬性沒有類型,因此能以非預期的方式覆寫。舉例來說,如果您透過網址定義 --my-color,會有什麼影響。

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

在這裡,因為 --my-color 並未輸入,所以無法知道網址不是有效的顏色值!使用時,這個值會改回預設值 (color 的黑色為黑色,background 為透明)。有了 Houdini Props 和 Vals 功能,您可以註冊自訂屬性,讓瀏覽器知道它「應該」是什麼樣子!

現在,自訂屬性 --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 Props」和「Vals」有兩種組合其一是定義,一旦定義後,就無法更新現有的已註冊屬性,嘗試重新註冊的屬性時將擲回錯誤,指出該屬性已定義。

其次,與標準屬性不同的是,系統剖析已註冊的屬性時,不會驗證已註冊的屬性。而是在運算後進行驗證。這表示在檢查元素屬性時,無效值都不會顯示為無效,而在有效項目之後加入無效的屬性則不會變回有效屬性;但無效屬性則會改回已註冊的屬性的預設值。

為自訂屬性建立動畫

已註冊的自訂屬性除了類型檢查之外,還提供動畫效果!基本動畫範例如下所示:

<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 推出,現已推出自訂道具和 Vals,我們的廣告素材工具箱也擴大支援範圍,讓我們能夠定義輸入的 CSS 屬性,並運用這些屬性建立令人期待的新設計,並製作動畫效果。除此之外,Houdini 問題佇列中還有更多資訊,可讓您提供意見回饋及瞭解 Houdini 的下一步。Houdini 致力於開發各種功能 解釋網路樣式及版面配置的「魔術」

相片來源:Maik JonietzUnsplash 網站上