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

Una Kravets

CSS Houdini 是涵蓋一組低階 API 的總稱，這些 API 會公開 CSS 轉譯引擎的部分內容，並讓開發人員存取 CSS 物件模型。對 CSS 生態系統而言，這為重大異動，因為可以讓開發人員指示瀏覽器如何讀取及剖析自訂 CSS，不必等待瀏覽器廠商提供這些功能的內建支援。太棒了！

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

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

撰寫 Houdini 自訂屬性

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

獨立的 JavaScript 檔案 (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
包含在 CSS 檔案 (Chromium 85) 中
@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 字串)

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

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

使用包含「number」語法的自訂屬性，左側的漸層會顯示停點值之間的平滑轉換。右側的漸層使用預設自訂屬性 (未定義語法)，並顯示突兀的轉場效果。

在本例中，梯度停止百分比是透過懸停互動從 40% 的起始值設為 100% 的結束值。您應該會看到頂端漸層顏色向下平滑轉換。

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

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

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

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

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

現在就能順暢地轉換漸層。

平滑轉換漸層邊框。在 Glitch 上查看示範

結論

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

攝影者：Cristian Escobar 的 Unsplash 網站上。