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

Una Kravets

CSS Houdini 是一個總歸稱作，包含 一組低階 API，可公開 CSS 算繪引擎的各個部分，並提供 可讓開發人員存取 CSS 物件模型這對 Android Vitals 而言相當驚人 變更 CSS 生態系統的變更內容，因為這項功能可讓開發人員告訴瀏覽器 能夠讀取及剖析自訂的 CSS，而不需等待瀏覽器廠商提供 內建支援這些功能。令人期待！

Houdini umbrella 網羅 CSS 最令人驚豔的 屬性和值 API。

這個 API 可強化 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;
}

您現在可以透過以下方式存取 --colorPrimary，就像任何其他 CSS 自訂屬性一樣： var(--colorPrimary)。不過，不同之處在於 --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 */
}

語法

透過語法功能，你可以指定 不同類型的工作目前可使用的類型包括：

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

設定語法可讓瀏覽器輸入自訂屬性。 這麼做有許多好處。

為了說明這一點，我將示範如何為漸層製作動畫。目前， 您無法在漸層值之間順暢建立動畫 (或內插)，例如 每個漸層宣告都會剖析為字串。

在本例中，梯度停止百分比是從頭開始建立動畫 滑鼠遊標懸停互動，將 40% 的值設為 100% 的結束值。您應該會看到 使上方漸層色彩向下的流暢轉換。

左側的瀏覽器支援 Houdini Properties and Value 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 問題佇列

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