inherits

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

構文

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

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報