@property
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
@property
は CSS のアットルール
で、 API の CSS Houdini の傘下にあるものです。開発者が明示的に CSS custom properties
を定義し、プロパティ型のチェック、既定値の設定、プロパティが値を継承するかどうかの定義ができるようになっています。
property
ルールは、 JS を実行することなく、スタイルシートの中で直接カスタムプロパティの登録を表します。有効な @property
ルールは、あたかも CSS.registerProperty
が同等のパラメータで呼び出されたかのように、登録されたカスタムプロパティを生成します。
構文
css
@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)を使用する場合は次のようになります。
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",
});
形式文法
@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