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-valueCSS の記述子で、構文があらゆる有効なトークンストリームを受け入れない限り @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;
}

JavaScriptCSS.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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
initial-value descriptor

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報