自訂屬性

假設您已為網站建立一些初始樣式，並發現自己重複使用 CSS 中的某些值。您使用 dodgerblue 做為主要顏色，並將該顏色加入按鈕邊框、連結文字和標題背景，然後使用設計工具為網站的其他部分挑選該藍色的變化版本。接著，您會取得樣式指南，主要顏色現在是 oklch(70% 0.15 270)。

自訂屬性 (或 CSS 變數) 可讓您整理及重複使用 CSS 中的值，使樣式更具彈性且更容易瞭解。

建立屬性

如要建立屬性，最簡單的方式是為您定義名稱的新屬性設定值。

.card {
  --base-size: 1em;
}

所有屬性名稱開頭都必須是兩個破折號。這樣一來，您就不會嘗試將現有的 CSS 屬性名稱用於自訂值。CSS 規格絕不會新增以兩個破折號開頭的屬性。

接著，您可以使用 var() 函式存取這個屬性。這個範例會將 .card-title 內的字型大小設為 --base-size 值的兩倍。

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

使用自訂屬性

如您所見，您可以使用 var() 函式搭配自訂屬性的值。您可以在值中使用 var() 函式，但無法在媒體查詢中使用。這類函式特別適合做為其他 CSS 函式的引數。

備用廣告

如果嘗試使用未設定值的自訂屬性，會發生什麼事？var() 函式會採用第二個值做為備用值。備用值甚至可以是另一個含有巢狀 var() 的自訂屬性。

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

無效值計數

如果自訂屬性解析為無效值 (例如 background-color 屬性的 1em 值)，系統就不會使用該元素中該屬性的其他有效宣告。這是因為瀏覽器在計算值時，必須先捨棄其他宣告，才能判斷值是否無效。系統會改用繼承值或初始值。

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

在上述範例中，.invalid 元素不會有藍色背景。由於 background-color 不會繼承，因此值會是初始值 transparent。

覆寫和沿用

您通常會希望自訂屬性採用預設行為，也就是值會繼承。為屬性設定新值時，該元素及其所有子項都會採用該值，直到被其他值覆寫為止。

自訂屬性是由層疊決定，因此也可以由更具體的選取器覆寫。

使用 @property 進一步控管

透過設定值建立的自訂屬性可以是任何類型，而且會繼承。如要進一步控管自訂屬性，可以使用 @property 規則。

先前建立的 --base-size 屬性會等同於這項 @property 宣告。

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

syntax 值會設定屬性適用的CSS 值類型。如果您在該屬性上設定不同類型，該屬性就會無效，並回復為初始值或在層疊中較高位置設定的繼承值。

使用 @property 建立自訂屬性時，可以透過 inherit: false 停用繼承功能。如果停用繼承功能並覆寫自訂屬性的值，所選元素的屬性值會變更，但子項不會。如果多個選取器以相同元素為目標，這項功能通常會很有用。

initial-value 會設定屬性的值，除非稍後變更。除非語法為 * (表示任何 CSS 類型)，否則 @property 必須設定 initial-value。這可確保屬性一律會採用指定語法的值，且絕不會未定義。

使用 JavaScript 更新自訂屬性

您可以使用 JavaScript 更新元素上的自訂屬性值，藉此動態更新網站的樣式。

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

這個範例會更新 #my-button 元素上的樣式標記，並在開發人員工具中檢查，結果如下：

<button id="my-button" style="--color: orange">Click me</button>

在上述範例中，您可以看到如何透過存取自訂 HTML 屬性中儲存的資料，設定自訂屬性。每個按鈕都有 data-color 屬性，值為特定顏色。在主體元素上設定的 --background 自訂屬性，會重設為所點選按鈕的 data-color 值。

您也可以使用 getComputedStyle(element).getPropertyValue("--variable") 取得特定元素的屬性值。如果您的邏輯需要回應連鎖值，這項功能就非常實用。