yuheijotaki.com

CSS @property を試してみる

目次

はじめに

CSSのアットルールである @property を試してみた。

CSS のアットルールとは

MDNでは

CSS の動作を既定するもの

と説明されている。

よく使うものだと次のものもアットルールに属する。

  • @media {...}
  • @supports {...}
  • @keyframes {...}

@property の概要

CSSカスタムプロパティ（変数）の

  • プロパティ型のチェック
  • 既定値の設定
  • プロパティが値を継承するかどうか

の定義ができる。

使い方の簡単なデモは次の通り。

:root {
  --example-color: #c0ffee;
}

@property --example-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

.hoge {
  color: var(--example-color);
}

ブラウザ対応状況

2024年7月9日にFireFox 128にてサポートされ、各モダンブラウザ最新版でサポートされたばかりの状況。
https://caniuse.com/mdn-css_at-rules_property

使い方の例

@property --example-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

syntax:

プロパティに許容される構文を記述する。
<length>, <number>, <percentage>, <color>, <integer>, <angle>…
+ （スペース区切り）や # （カンマ区切り）で値のリストも定義できる。

inherits:

子要素で継承するかどうかを制御する。
true or false

initial-value:

プロパティの初期値を設定する。

デモ：https://yuheijotaki.com/demo/@property/

さいごに

グラデーションのアニメーションが簡単にできる、というよりカスタムプロパティの値に型を定義でき、その型を含めた定義をCSSが読み取ってくれるようになるのが @property を利用する理由という解釈になった。
またCSSのデータ型についてはあまり意識してこなかったが、意識できると（知識が増えると）うまく動かないときの理由などが根拠を持って言える気がしてくる。

参考にした記事や関連資料