Prop For That

Adam が props に夢中なのは秘密ではありません。彼は以前、色、影、サイズ、タイポグラフィなど、多数の事前設定済み変数を提供する Open Props を発表しました。今度は Prop For That で似たようなアイデアを発表しましたが、CSS では通常ブラウザで見ることのできない要素に基づいた ライブ props を作成するという点で驚異的です。カーソル位置、進行状況値、特定のフォーム状態、現在時刻、スクロール速度など、JavaScript が検知して CSS に渡すようなものです。

私の理解では、スクリプト関連の処理はすべてバックグラウンドで実行されています。必要なのはライブラリをインポートし、HTML で宣言し、CSS でスタイルを適用するだけです。

たとえば、以前 Chris がカーソル位置を追跡するために JavaScript で登録した カスタムプロパティ について：

Prop For That がそれをきれいにカバーしています。 違いは、スクリプト をトリガーするデータ属性で作業している点です：

<div class="mover" data-props-for="pointer">...</div>

そして、関連する props をスタイルに配置します：

.mover {
  aspect-ratio: 1;
  width: 50px;
  background: red;
  position: absolute;
  left: calc(var(--live-pointer-x, 0) * 1px);
  top: calc(var(--live-pointer-y, 0) * 1px);
}

デモが秀逸です。 まったく、Adam は本当に上品な作品を作り上げます。

Direct Link →