CSS3：@property規則

JavaScript を走らすことなく、カスタムプロパティ登録をスタイルシート内で直に表現する。

妥当な @property 規則からは、等価なパラメーターで registerProperty() を call したかのように、登録済みカスタムプロパティが得られることになる。

@property 規則には、［syntax、inherits］記述子が要求される。どちらかが欠落している場合、規則全体が無効になり、無視されるものとする。

initial-value 記述子は、構文が全称構文定義である場合に限り省略可能であり、他の場合は要求される ― 欠落している場合、全体規則は無効になり、無視されるものとする。

未知な記述子は、無効であり無視されるが、@property 規則を無効化することはない。

「§ 登録の決定法」に指定したように、同じ <custom-property-name> 用に複数の妥当な @property 規則が定義された場合、スタイルシート順序で最後のものが“勝つ”。registerProperty() によるカスタムプロパティ登録は、同じ <custom-property-name> 用のどの @property 規則にも勝つ。

@property は、shadow ツリーの内側にあるスタイルシート内にある場合は無効になり、無視されるものとする。

@property を利用してプロパティを登録する例：

HTML：

<script>
  CSS.paintWorklet.addModule('circle.js');
</script>
<style>
  @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;
  }
</style>

circle.js：

registerPaint('circle', class {
    static get inputProperties() { return ['--radius']; }
    paint(ctx, geom, properties) {
      let radius = properties.get('--radius').value;
      ctx.fillStyle = 'black';
      ctx.beginPath();
      ctx.arc(geom.width / 2, geom.height / 2, radius, 0, 2 * Math.PI);
      ctx.fill();
    }
});

CSS3

@規則

@property

テスト

スクリプト：

スクリプト：