initial-value

構文

/* Set initial color value */
initial-value: rebeccapurple;

/* Set initial length value */
initial-value: 16px;

値

syntax 記述子で指定された型に一致する値です。 例えば、syntax が <color> の場合、initial-value は有効な color 値でなければなりません。

syntax 記述子の値が全称構文定義でない場合、initial-value 記述子は計算上独立した値でなければなりません。これは、CSS に依存しない「グローバル」定義を除き、それ以外にも他の値に依存せずに計算値に変換可能であるということです。例えば10px は計算上独立しており、計算値に変換されても変化しません。2in も同時に有効です。1in は常に 96px と等価だからです。しかし 3em は無効です。em の値は親要素の font-size に依存するためです。

公式定義

形式文法

initial-value = 
  <declaration-value>?  

例

カスタムプロパティに初期値を設定

この例は、初期色値を #c0ffee とするカスタムプロパティ --my-color の定義方法を示しています。この初期値は、プロパティが継承されない場合 (inherits: false) かつ要素に他の値が設定されていない場合に使用されます。

@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",
});

仕様書

ブラウザーの互換性

関連情報

• 他の @property 記述子: inherits および syntax
• CSS プロパティと値 API
• CSS 描画 API
• CSS 型付きオブジェクトモデル
• Houdini API