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

Una Kravets

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

在 Houdini umbrella 中最令人期待的 CSS 新增了屬性和值 API。

這個 API 能為 CSS 自訂屬性 (通常稱為 CSS 變數) 提供語意含義 (以語法定義)，甚至是備用值，藉此強化 CSS 自訂屬性，進而支援 CSS 測試。

編寫 Houdini 自訂屬性

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

獨立的 JavaScript 檔案 (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
包含在 CSS 檔案 (Chromium 85)
@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

您現在可以透過 var(--colorPrimary) 存取 --colorPrimary，就像任何其他 CSS 自訂屬性一樣。但差別在於 --colorPrimary 並非僅以字串形式讀取。有資料！

備用值

就像任何其他自訂屬性一樣，您可以使用 var 或設定 (寫入/重寫) 值，但使用 Houdini 自訂屬性設定覆寫值時，如果在覆寫時設定了 false 值，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 Properties 和 Values API，啟用流暢的漸層停止轉換功能。右側的瀏覽器沒有。不支援的瀏覽器只能以從 A 點到 B 點的字串形式瞭解這項變更。您無法插入值，因此無法順暢轉換。

不過，如果您在編寫自訂屬性時宣告語法類型，然後使用這些自訂屬性啟用動畫，就會看到轉場效果。您可以按照以下方式對自訂屬性 --gradPoint 執行個體化：

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

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

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

這樣即可順利啟用漸層轉換效果。

流暢轉換漸層邊框。查看 Glitch 示範

結論

@property 規則可讓您在 CSS 中編寫語意上有實質意義的 CSS，使無障礙技術更容易使用。如要進一步瞭解 CSS Houdini 和 Properties and Values API，請參閱下列資源：

相片由 Cristian Escobar 在 Unsplash 上提供。