CSS Reference

@property

CSS カスタムプロパティを明確に定義する

@property 規則は、CSS カスタムプロパティの定義に使用されます。@property 規則を使用することで、プロパティ型のチェック、既定値の設定、プロパティが値を継承するかどうかの定義を明確に行うことができます。

詳細説明

@property 規則の基本的な構文は下記のようになります。

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

<custom-property-name> は、カスタムプロパティ名の指定、<declaration-list> の記述例としては下記のようになります。

@property --base-text-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #000000;
}

@property 規則には、syntax および inherits 記述子の指定が必須となります。どちらかが欠けても、その @property 規則自体が無効になります。

initial-value 記述子は値（構文文字列）が * （全称指定 / syntax: "*";）の場合は省略可能ですが、それ以外の場合は記述が必須となります。もし、initial-value 記述子の省略が許されない状況で initial-value 記述子が省略された場合、その @property 規則自体が無効になります。

syntax 記述子

syntax 記述子は、定義するカスタムプロパティで許容される構文を記述します。TypeScript における型定義と同様です。下記の構文が指定可能で、さらに、+ と # の乗算子による指定と、| による構文の合成が可能です。

なお、initial, inherit, unset, revert, revert-layer 各キーワード（CSS-wide keywords）は、構文の指定に関わりなく許容されます。

特定の値 例えば、auto と指定すれば、auto という値が期待されることになります。* の場合は、すべての値を受け入れることになります。
<length> <length> データ型が期待されます。
<number> <number> データ型が期待されます。
<percentage> <percentage> データ型が期待されます。
<length-percentage> <length>、もしくは <percentage> データ型、あるいは、<length> と <percentage> を組み合わせた妥当な calc() 式が期待されます。
<string> <string> データ型が期待されます。
<color> <color> データ型が期待されます。
<image> <image> データ型が期待されます。
<url> <url> データ型が期待されます。
<integer> <integer> データ型が期待されます。
<angle> <angle> データ型が期待されます。
<time> <time> データ型が期待されます。
<resolution> <resolution> データ型が期待されます。
<transform-function> <transform-function> データ型が期待されます。
<custom-ident> <custom-ident> データ型が期待されます。
<transform-list> <transform-function> 値のリスト（空白区切り）が期待されます。なお、<transform-list> は <transform-function>+ と同等です。

+（U+002B）乗算子

空白で区切られたリストを表します。つまり、<length>+ と指定された場合は、空白で区切られた、<length> データ型を持つ値のリストが期待されることになります。

#（U+0023）乗算子

カンマ（,）で区切られたリストを表します。つまり、<color># と指定された場合は、カンマ（,）で区切られた、<color> データ型を持つ値のリストが期待されることになります。

|（U+007C）合成子

| で区切ることで、複数の構文を指定（OR）することができます。

例えば、foo | <color># | <integer> と指定した場合、foo という値、もしくはカンマ（,）で区切られた、<color> データ型を持つ値、あるいは <integer> データ型を持つ値のいずれかが期待されることになります。

inherits 記述子

@property 規則で定義されたカスタムプロパティを既定で継承するかを指定します。指定できる値は、true （継承する）、もしくは false （継承しない）です。

initial-value 記述子

定義したカスタムプロパティの初期値を指定します。

@propertyのサンプルソース

@property --item-width {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 60%;
}

.container {
  --item-width : 20%;
}

.container .item {
  width: var(--item-width);
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome