CSS3

@規則用記述子

syntax

[Edge]○？。→●、mdn

カスタム プロパティの値の構文指定。

@property 規則で表現されるカスタム プロパティ登録の構文を指定する。それは、算出値の時点でプロパティの値がどう構文解析されるかを制御する。

@property 規則が妥当になるためには、この記述子が要求される。欠落している場合、@property 規則は無効になる。

供された文字列が妥当な構文文字列でない場合（構文定義を消費する(その文字列) の結果が 失敗 になる場合）、記述子は無効になり，無視されるものとする。

例

@property --radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

div {
  width: 100px;
  height: 100px;
  --radius: 10px;
  background: paint(circle);
  transition: --radius 1s;
}
div:hover {
  --radius: 50px;
}

テスト