inherits
Baseline
2024
最近利用可能
July 2024以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
inherits は CSS における @property アットルールの記述子で、登録された CSS カスタムプロパティがデフォルトで継承するかどうかを制御します。
これは必須の記述子です。なかったり無効であったりした場合、 @property ルール全体が無効となり無視されます。
構文
css
/* カスタムプロパティが値を継承しない */
inherits: false;
/* カスタムプロパティが値を継承する */
inherits: true;
値
公式定義
形式文法
inherits =
true |
false
例
カスタムプロパティの継承動作の設定
この例は、親要素から値を継承しないカスタムプロパティ --my-color を定義する方法を示しています。
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",
});
仕様書
| 仕様書 |
|---|
| CSS Properties and Values API Level 1 # inherits-descriptor |