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

Una Kravets

準備好使用 CSS 強化功能！@property 規則是 API 的 CSS Houdini 系列的一部分，因此現在所有新式瀏覽器均可完整支援。這項顛覆性的功能讓 CSS 自訂屬性 (又稱 CSS 變數) 得以獲得更高層級的控制權和彈性，讓樣式表變得更聰明、也更靈活。

瀏覽器支援

  • 85
  • 85
  • 128
  • 16.4

來源

「@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 超能力的強大威力也越來越強。

延伸閱讀