CSSにおけるrandom()関数の実験
CSSの新機能であるrandom()関数について、実用的なユースケースと実験的な実装方法を探る記事。random()を使うことで、スタイルシート内で動的な値の生成が可能になり、デザインにランダム性を導入できる可能性について解説している。
背景メモ
- CSSにランダム生成関数 `random()` を追加しようという提案が進行中。CSS Working Groupで議論されており、現状はまだ仕様策定の初期段階。
- 現在CSSで「ランダムな値」を表現するには、JavaScriptやCSSプリプロセッサ（Sassの`random()`など）に頼るか、`:nth-child`のような疑似クラスを工夫して使うしかない。あくまで「決定的（毎回同じ）」な結果しか出せないのがCSSの原則。
- `random()` が実装されれば、デザイントークン（カスタムプロパティ）と組み合わせて、ページをリロードするたびに微妙に異なる配色やレイアウト、アニメーションのバリエーションをCSSオンリーで生成できるようになる。
- 背景として、CSSは元来「スタイルを宣言的に記述する言語」であり、乱数生成のような実行時依存の処理は設計思想の外にあった。近年のContainer Queriesや`@scope`、`@property`などの仕様拡張でその境界が揺らいでいる。
- この記事は、Polypane（ブラウザ開発ツール）の開発者が先行実装を試し、`random()` の使い勝手や潜在的なユースケース（A/Bテスト的なバリエーション生成、生成アート風デザインなど）を検証したもの。