@property:現在支援通用瀏覽器的新一代 CSS 變數

發布日期:2024 年 7 月 12 日

準備好迎接 CSS 大升級!@property 規則是 CSS Houdini 總體 API 的一部分,現在已全面支援所有新式瀏覽器。這項突破性的功能可讓您更靈活地控制 CSS 自訂屬性 (也稱為 CSS 變數),讓樣式表更聰明、更具動態性。

  • 語意意義:使用 @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 超級功能的強度也越來越強。

延伸閱讀