背景に散らした水玉の位置を少しずつずらしたい、カードを机に置いたように不ぞろいに傾けたい。そんな「ちょっとした揺らぎ」を出すために、これまではJavaScriptで乱数を作ってstyle属性に書き込むか、あらかじめ手で値をばらして書いておくのが定番でした。CSSに乱数を生む random() 関数が入り、Safariに続いてChromeでも使えるようになりつつあります。

Chromeのベータ版で有効になった

random() は、指定した範囲から数値をひとつ選んでくれるCSSの関数です。もともとSafariが先行して実装し、WebKitの開発者ブログで星空や写真の山積み、ルーレットといったデモ付きで紹介されていました。CodePenのブログでChris Coyier氏も、Safariが先導したこの機能がChromeにも来ることを歓迎する記事を書いています。

あるブラウザ対応状況を自動で追っている公開リポジトリの記録によると、CSS.supports() での判定がChromium 153では未対応、Chrome 156のベータでは対応に変わったとのことです。同じ記録では、Chrome 156の安定版の公開は10月20日の予定とされています。一方、MDNの解説ページではまだ主要ブラウザの一部で動かない機能という扱いで、Polypaneの検証記事でもSafari 26.2以降は部分対応、Firefoxは未対応と書かれています。全員の画面で同じように動く段階ではない、という前提で付き合うのがよさそうです。

書き方の基本と、値を共有する仕組み

いちばん簡単な形は random(最小値, 最大値) です。たとえば top: random(0%, 100%); と書けば、要素ごとに縦位置がばらけます。三つ目に刻み幅を足すと random(2px, 10px, 1px) のように端数のない値だけが選ばれます。最小値と最大値は同じ種類の値にそろえる必要があり、random(0, 100%) のように数値と割合を混ぜると無効になる点はPolypaneの記事でも注意されていました。

少しつまずきやすいのが、カスタムプロパティとの組み合わせです。--size: random(50px, 20vmin); と書いて幅と高さの両方に使っても、二つは別々の値になります。カスタムプロパティは結果を保存する変数ではなく、呼び出した場所に式をそのまま差し込む仕組みだからです。幅と高さをそろえて正円にしたいときは、最初の引数に共有の範囲を指定します。MDNによると、element-scoped は同じ要素の中で値を共有し、property-scoped は全要素で同じプロパティの値を共有します。--particle-size のような独自の名前を付けて共有範囲を決めることもでき、@property で登録したカスタムプロパティなら計算済みの値が保持されるとのことです。

仕様の言葉は途中で変わっている

一年ほど前のWebKitの記事では、全要素で共有する指定に element-shared という語が使われていました。今のMDNでは前述の element-scoped や property-scoped といった語で整理されています。検索で見つかる古いサンプルをそのまま写すと動かないことがあるので、書き方は最新の資料で確かめるのが安全です。

中小企業のサイトで使うなら

実務で使いやすいのは、なくても困らない装飾の部分です。背景の粒の配置、ホバーしたときの写真のわずかな傾き、紙吹雪のような演出などは、対応していないブラウザでは揺らぎのない固定の見た目に戻るだけで済みます。WebKitのルーレットのデモでも、先に固定の値を書き、その次の行で random() を書いて上書きする形が取られていました。@supports で対応を判定して出し分ける方法もMDNの例に載っています。

逆に、文字色や背景色のように読みやすさに関わる値を乱数に任せるのは避けたほうが無難です。MDNのアクセシビリティの項でも、ランダムな文字色が背景と見分けにくくなるおそれが指摘されています。色を揺らすなら、明るさは固定して色相だけを動かすなど、範囲をしぼる工夫が要ります。また、ページを読み込むたびに見た目が変わるため、表示崩れの報告を受けたときに再現しにくい点も、制作側としては頭に入れておきたいところです。

これまでJavaScriptや手作業の値のばらしで支えてきた小さな演出が、スタイルシートの数行に収まるようになります。全ブラウザでそろうまでにはまだ時間がかかりそうですが、まずは自社サイトの装飾の一部から試し、崩れない作り方の勘所をつかんでおく価値はありそうです。