inherits

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

inherits は CSS の記述子で、 @property アットルールを使用するときには必要であり、 @property で指定されたカスタムプロパティの登録を既定で継承するかどうかを制御します。

構文

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

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

値

true

このプロパティは既定で継承されます。

false

このプロパティは既定で継承されません。

公式定義

関連するアット規則@property
初期値auto
計算値指定通り

形式文法

inherits = 
  true   |
  false

例

--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
# inherits-descriptor

ブラウザーの互換性

BCD tables only load in the browser

関連情報