CSSのrandom()を肉球スタンプに追加。Chrome 152は通常設定で無効、Safari 26.5.2では動いた

公開 2026.10.16約4分で読めます

TL;DRこの記事の要点

CSSのrandom()は、自分が確かめた範囲ではSafari 26.5.2だけで動いた(Chrome 152は通常設定で無効)
非対応のブラウザでは宣言が無視されて元の見た目に戻るので、なくても困らない装飾に使う
Sassで書くとビルドが落ちるので、unquote()でCSSにそのまま出力する

目次5項目

random()でできること
対応ブラウザを、自分の環境で確かめた
肉球スタンプに入れた2行
Sassで書いたらビルドが落ちた
使う場所の線引き

2026年10月14日時点で、自分が通常設定で確かめた範囲では、CSSのrandom()が動いたのはSafari 26.5.2だけでした。
Chrome 152では動きませんでした。
自分のサイトの肉球スタンプに入れて、ブラウザごとの違いを確かめた記録です。

🎥 この記事の内容は動画でも解説しています。

非対応のブラウザでは、random()を書いた宣言が無視されて、元の見た目に戻ります。
なので、なくても困らない装飾に限って使うのが前提です。
出典では、Chromium 148以降は実験機能のフラグ付きで動き、Firefoxは未対応とされています。

random()でできること

CSSの値を、要素ごとにランダムに決める関数です。
MDNの書き方はこうです。

random(最小値, 最大値)
random(最小値, 最大値, きざみ)

たとえばrotate: random(-16deg, 16deg)と書くと、同じクラスを付けた要素でも、角度が要素ごとに違う値になります。
きざみを付ければ、random(20px, 120px, 20px)のように20pxおきの値だけになります。
デモ付きの解説は、ICS MEDIAの記事がわかりやすいです。

対応ブラウザを、自分の環境で確かめた

MDNでは、まだBaselineではない実験的な機能として載っています。
なので、自分の手元で確かめました。

ブラウザ	結果	確かめ方
Chrome 152(既定の設定)	動かない	`CSS.supports('order', 'random(1, 2)')`がfalse。`random()`を書いた高さが無効になった
Safari 26.5.2(Mac)	動いた	カードごとに肉球の向きと位置が違って見えた(画面収録)
Chromium 148以降(実験機能のフラグ付き)	動くとされる	Polypaneの記事による情報。自分では未確認
Firefox	未対応とされる	同じ記事による情報。自分では未確認

下2行は、Polypaneの記事(2026年6月24日付)から拾いました。
同じ記事には、Safari 26.2以降でも一部のデモは正しく動かないとも書かれています。
自分が確かめたのは、Chrome 152の通常設定が「動かない」ことと、Safari 26.5.2で肉球が動いたことまでです。

肉球スタンプに入れた2行

このサイトの記事カードには、PCでホバーすると肉球がバンッと押されるスタンプがあります。
全カードで同じ角度だったので、向きと位置をカードごとにばらしてみました。

.c-card__paw {
	/* 従来の固定表示(非対応ブラウザはこのまま) */
	transform: translate(-50%, -50%) scale(2.4) rotate(-8deg);

	/* 対応ブラウザだけ、カードごとにばらす */
	rotate: random(-16deg, 16deg);
	translate: random(-7%, 7%) random(-7%, 7%);
}

アニメーションはtransformで動かしているので、別プロパティのrotateとtranslateに書けば、今のアニメは触らずに足せます。
非対応ブラウザでは、この2行が無効になるだけです。
なので@supportsで囲まなくても、表示は壊れません。

Safari 26.5.2で、記事カードにホバーした様子(画面収録)。カードごとに肉球の向きと位置が違う

Safariで記事一覧を開くと、実際に動きます。
Chromeで見ると、全部同じ角度のままです。

Sassで書いたらビルドが落ちた

このテーマはSassで書いているので、最初は上の通りにrandom(-16deg, 16deg)と書きました。
そうしたら、ビルドがエラーで止まりました。

原因は、Sassにもrandom()という組み込み関数があることです。
Sassが先に自分の関数だと解釈して、引数の形が合わずに落ちました。
CSSの関数としてそのまま出力したいので、unquote()で文字列として渡します。

/* SCSS */
.c-card__paw {
	rotate: unquote("random(-16deg, 16deg)");
	translate: unquote("random(-7%, 7%) random(-7%, 7%)");
}

/* ビルド後のCSS */
.c-card__paw {
  rotate: random(-16deg, 16deg);
  translate: random(-7%, 7%) random(-7%, 7%);
}

これで、出力されたCSSにはrandom()がそのまま入ります。