發布日期：2024 年 7 月 12 日
準備好迎接 CSS 大升級！@property 規則是 CSS Houdini 總體 API 的一部分，現在已全面支援所有新式瀏覽器。這項突破性的功能可讓您更靈活地控制 CSS 自訂屬性 (也稱為 CSS 變數)，讓樣式表更聰明、更具動態性。
@property 的優點
- 語意意義：使用
@property為自訂屬性定義類型 (語法)。這會告訴瀏覽器自訂屬性所含的資料類型 (例如顏色、長度或數字)，避免產生意外結果，並支援動畫漸層等新功能。 - 備用值：不再有消失的樣式！使用
@property為自訂屬性設定初始值。如果稍後指派無效的值，瀏覽器會順利使用您定義的備用值。 - 改善錯誤處理：強化型型別安全性和設定備用值的功能，可讓您直接在 CSS 中測試及驗證。
建立進階自訂屬性
如要建立「標準」自訂屬性，請將屬性名稱設為以 -- 為前置字元，並為該屬性提供值。瀏覽器會將這些自訂屬性的值解析為字串。
以下範例說明如何初始化預設 (以字串為基礎) 的自訂屬性。
:root {
--myColor: hotpink;
}
如要享有這些「進階自訂屬性」的好處，包括字串以外的語義，請使用 @property 註冊 CSS 自訂屬性。
在本例中，同一個自訂屬性會使用 @property 進行初始化。
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
使用 @property 初始化的自訂屬性除了名稱和值之外，還提供更多詳細資料。包含語法類型，並將繼承設為 true 或 false。
這種做法的好處在於，您可以使用標準屬性，讓該屬性包含顏色做為值，並在樣式表的其他位置使用該顏色。如果有人將該屬性更新為以數字做為值，則在其他地方使用該屬性時就會失敗。使用 @property 時，系統會定義備用顏色，並使用 syntax 宣告此屬性必須保留顏色值。如果使用非顏色值，系統會改用備用值。
示範：閃爍的漸層背景
@property 的其中一個實用功能，就是可為先前無法轉換的屬性提供流暢的動畫，例如瀏覽器會將漸層視為圖片。不過，如果您透過 @property 為變數提供語法意義，這些變數可用於漸層語句。您現在正在說明漸層內兩個已宣告值之間的動畫，並啟用動畫。請參考以下範例：資訊卡含有精緻的背景動畫，其中包含兩個放射狀漸層，可在不同時間軸上轉換顏色：
@property 為背景漸層中的顏色設定動畫樣式。如要實現這項功能，請將自訂屬性值設為顏色：
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: lavender;
}
@property --shine-1 {
syntax: "<color>";
inherits: false;
initial-value: wheat;
}
@property --shine-2 {
syntax: "<color>";
inherits: false;
initial-value: lightpink;
}
接著，您可以存取這些元素來建立初始漸層背景：
.card {
background: radial-gradient(
300px circle at 55% 60% in oklab,
var(--shine-2), transparent 100% 100%),
radial-gradient(farthest-side circle at 75% 30% in oklab,
var(--shine-1) 0%, var(--card-bg) 100%);
}
接著，您可以更新主要影格中的值：
@keyframes animate-color-1 {
to {
--shine-1: orange;
}
}
@keyframes animate-color-2 {
to {
--shine-2: hotpink;
}
}
並為每個項目製作動畫：
animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;
結論
CSS 註冊的自訂屬性是一項非常強大的功能，可為 CSS 變數提供意義和背景資訊，進而擴充 CSS 語言。如今，@property 已納入基準，這項 CSS 超級功能的強度也越來越強。