initial-value

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

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

構文

@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 アットルールを使用すると次のようになります。

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

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

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

関連情報