@property：為 CSS 變數提供超能力

Una Kravets

CSS Houdini 是涵蓋一組低階 API 的總稱，這些 API 會公開 CSS 算繪引擎的部分內容，並讓開發人員存取 CSS 物件模型。這對 CSS 生態系統來說是一項重大變革，因為開發人員可以告訴瀏覽器如何讀取及剖析自訂 CSS，而無須等待瀏覽器供應商提供這些功能的內建支援。太棒了！

Houdini 中 CSS 最令人期待的新增功能之一，就是屬性和值 API。

這個 API 會為 CSS 自訂屬性 (也常稱為 CSS 變數) 提供語意意義 (由語法定義) 和備用值，進而強化 CSS 自訂屬性，並啟用 CSS 測試。

撰寫 Houdini 自訂屬性

以下是設定自訂屬性 (例如 CSS 變數) 的範例，但現在使用語法 (類型)、初始值 (備用) 和繼承布林值 (是否從父項繼承值)。目前的做法是透過 JavaScript 中的 CSS.registerProperty()，但在支援的瀏覽器中，您可以使用 @property：

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

您現在可以透過 var(--colorPrimary) 存取 --colorPrimary，就像存取任何其他 CSS 自訂屬性一樣。不過，這裡的差異在於 --colorPrimary 不只是字串。它有資料！

備用值

就像其他自訂屬性一樣，您可以使用 var 取得或設定 (寫入/重寫) 值，但在 Houdini 自訂屬性中，如果您在覆寫時設定 falsey 值，CSS 算繪引擎會傳送初始值 (備用值)，而不是忽略該行。

請參考下列範例。--colorPrimary 變數的 initial-value 為 magenta。但開發人員已將無效值「23」提供給該屬性。如果沒有 @property，CSS 剖析器會忽略無效的程式碼。剖析器現在會改為使用 magenta。這可在 CSS 中提供真正的備用方案和測試功能。真棒！

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

語法

有了語法功能，您現在可以指定類型來編寫語意 CSS。目前允許的類型包括：

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (自訂 ID 字串)

設定語法可讓瀏覽器執行自訂屬性的型別檢查。這麼做有許多好處。

為了說明這一點，我將示範如何為漸層效果製作動畫。目前無法在漸層值之間順暢地進行動畫 (或內插)，因為每個漸層宣告都會解析為字串。

在本範例中，透過懸停互動，從 40% 的起始值動畫轉換至 100% 的結束值。您應該會看到頂端漸層顏色向下平滑轉換。

左側的瀏覽器支援 Houdini 屬性和值 API，可實現平滑的漸層停止轉場效果。右側的瀏覽器則沒有。不支援的瀏覽器只能將這項變更視為從 A 點到 B 點的字串。無法插補值，因此您不會看到流暢的轉場效果。

不過，如果您在編寫自訂屬性時宣告語法類型，然後使用這些自訂屬性啟用動畫，就會看到轉場效果。您可以將自訂屬性 --gradPoint 例項化，如下所示：

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

然後，在動畫播放時，您可以將值從初始的 40% 更新為 100%：

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

這樣一來，就能啟用順暢的漸層轉場效果。

結論

@property 規則可讓您在 CSS 中撰寫具有語義的 CSS，讓這項令人興奮的技術更容易上手。如要進一步瞭解 CSS Houdini 和 Properties and Values API，請參閱下列資源：

• Houdini 是否已就緒？
• MDN Houdini 參考資料
• 運用 Houdini 的新 API 打造更聰明的自訂屬性
• Houdini CSSWG 問題佇列

相片來源：Unsplash 上的 Cristian Escobar。