@property

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

@property は CSS のアットルールで、 API の CSS Houdini の傘下にあるものです。開発者が明示的に CSS custom properties を定義し、プロパティ型のチェック、既定値の設定、プロパティが値を継承するかどうかの定義ができるようになっています。

property ルールは、 JS を実行することなく、スタイルシートの中で直接カスタムプロパティの登録を表します。有効な @property ルールは、あたかも CSS.registerProperty が同等のパラメータで呼び出されたかのように、登録されたカスタムプロパティを生成します。

構文

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

記述子

syntax

プロパティに許容される構文を記述します。

inherits

property で指定されたカスタムプロパティの登録を既定で継承するかどうかを制御します。

initial-value

プロパティの初期値を設定します。

有効な @property ルールはカスタムプロパティの登録を表し、プロパティ名はこのルールに先行するものをシリアライズしたものです。

@property ルールは syntax および inherits 記述子を必要とします。どちらかがない場合は、ルール全体が無効となり、無視されます。 initial-value 記述子は構文が全称構文定義である場合のみ省略可能で、それ以外の場合は必須です。その場合、存在しないとルール全体が無効となり、無視されます。

未知の記述子は無効で無視されますが、 @property ルールは無効になりません。

例

--my-color カスタムプロパティに色としての型チェックと、既定値、さらに値が継承されないことを追加します。

CSS の @property [アットルール]](/ja/docs/Web/CSS/At-rule)を使用する場合は次のようになります。

@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',
});

形式文法

@property = 
  @property <custom-property-name> { <declaration-list> }

仕様書

Specification
CSS Properties and Values API Level 1
# at-property-rule

ブラウザーの互換性

BCD tables only load in the browser

関連情報