@propertyの使い所

@propertyはCSS Houdiniのひとつで、CSSカスタムプロパティを明示的に定義するために使われる。

※2024-07-09にFirefox128でサポートされたことで、全主要ブラウザで利用可能になった

使い所

@propertyを使うことで、JavaScriptからCSSカスタムプロパティを参照したときに正しい値を取得できるようになる。

#demo {
  --u: cos(25deg);
}

@propertyを使わない場合

const u = getComputedStyle(element).getPropertyValue('--u')
console.log(u)

cos(25deg)という文字列が取得できる。

@propertyを使う場合

@property --u {
  /* --uカスタムプロパティが「数値」であることを宣言する */
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

const u = getComputedStyle(element).getPropertyValue('--u')
console.log(u)

0.906308という計算後の値が取得できる。