initial-value

Baseline 2024

Newly available

Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

initial-value は CSS の記述子で、構文があらゆる有効なトークンストリームを受け入れない限り @property アットルールを使用する上で必須です。そのプロパティの初期値を設定します。

initial-value として選択された値は、構文の定義に従って正しく解釈しなければなりません。したがって、もし構文が <color> であれば、初期値は有効な color 値でなければなりません。

構文

css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}

値

選択された syntax に対して正しい値を持つ文字列です。

公式定義

関連するアット規則@property
初期値n/a (required)
計算値指定通り

形式文法

initial-value = 
  <declaration-value>?

例

--my-color カスタムプロパティに、有効な色となる初期値を色として型チェックを追加します。

CSS の @property アットルールを使用すると次のようになります。

css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

JavaScript の CSS.registerProperty() を使用すると次のようになります。

js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

仕様書

Specification
CSS Properties and Values API Level 1
# initial-value-descriptor

ブラウザーの互換性

BCD tables only load in the browser

関連情報