inherits

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.

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

関連情報