1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. アットルール
  5. @property
  6. inherits

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

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 アットルールの記述子で、登録された CSS カスタムプロパティがデフォルトで継承するかどうかを制御します。 これは必須の記述子です。なかったり無効であったりした場合、 @property ルール全体が無効となり無視されます。

構文

css
/* カスタムプロパティが値を継承しない */
inherits: false;

/* カスタムプロパティが値を継承する */
inherits: true;

値

true

このプロパティはデフォルトで継承されます。

false

このプロパティはデフォルトで継承されません。

公式定義

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

形式文法

inherits = 
  true   |
  false
この構文は CSS Properties and Values API Level 1 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

カスタムプロパティの継承動作の設定

この例は、親要素から値を継承しないカスタムプロパティ --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",
});

仕様書

Specification
CSS Properties and Values API Level 1
# inherits-descriptor

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content