2026年5月、Webプラットフォームが「静かな爆発」を起こした理由
Webプラットフォームが「静かな爆発」を起こしている
2026年4月〜5月の2カ月間で、ブラウザに実装された新機能の数は過去2年で最多ペースに達した。CSS random() 関数、Gap Decorations プロパティ、時間ベースのCSSアニメーション制御、そして writing-mode と pointer-events の相互運用性改善。これらは表面的には小さなアップデートの集積に見えるが、開発者にとっては「実装コストと保守性のパラダイムシフト」が進行中であることを示している。
なぜ今、これほど多くの機能が集中投入されているのか。理由は3つある。第一に、Baselineプロジェクトが「どの機能が安全に使えるか」の指標を明確にしたことで、ブラウザベンダー間の実装競争が加速した。第二に、CSSが従来JavaScriptに依存していた領域（乱数生成、時間管理、パターン繰り返し）を標準化し始めた。第三に、エッジケース（縦書きレイアウトやポインター操作の無効化）の相互運用性がようやく整い、実用的な範囲が広がった。
以下、特に影響が大きい3つの機能領域に絞って解説する。
CSS random()：デザインに「予測不能」を組み込む
2026年4月、CSSに random() 関数が追加された。引数に範囲とオプションでシード値を指定するだけで、スタイルシート内で擬似乱数を生成できる。この機能は従来、JavaScriptで動的にスタイルを書き換える必要があった領域を、CSS単体で完結させる。
具体的なユースケースは3つ。乱数による色のバリエーション生成（--hue: random(0, 360)）、アニメーションの開始ディレイのばらつき（animation-delay: random(0s, 2s)）、グリッド内の要素サイズのランダム化（grid-column-end: random(1, 4)）。特に動的レイアウトで、カードや画像のサイズに微妙な差異を持たせたい場合、従来はJavaScriptで各要素にスタイルを適用するか、乱数クラスを事前に生成する必要があった。
落とし穴も存在する。同じページ内で random() を多用すると、レンダリングパフォーマンスに影響が出る可能性がある。ブラウザは乱数の再評価をキャッシュするが、アニメーションフレームごとに再計算される場合も想定される。現時点では、1ページあたり数十回の使用に留めるべきだ。さらに、random() はCSSカスタムプロパティと組み合わせることで真価を発揮する。カスタムプロパティのスコープを活用し、コンポーネント単位で乱数の範囲を制御する設計が推奨される。
Gap Decorations：グリッドとフレックスボックスの空白を「飾る」
Gap Decorations は、CSS GridやFlexboxの gap 領域に直接スタイルを適用できる新プロパティ群だ。従来は gap は単なる空白でしかなかったが、この機能により境界線（gap-line）や背景色（gap-fill）を設定できるようになった。
この機能の革命的な点は「見えないレイアウト構造の視覚化」をCSSだけで実現したことにある。例えば gap-line: 2px dashed #ccc と書けば、グリッドの行間・列間に破線グリッドが引ける。デザインプレビューやプロトタイピング、あるいはアクセシブルな表レイアウトで、セル間の区切りを明示する用途に極めて有効だ。
ただし注意すべきは、この機能がまだ全ブラウザで一貫した挙動を示していない点だ。2026年5月時点で、ChromeとEdgeはフル実装済みだが、FirefoxとSafariは一部制限付き。Baselineステータスは「実験的」のままである。プロダクションで使う際は、@supports (gap-line: 1px) による機能検出が必須となる。また、gap-line の値に border-* 系のショートハンドが使えないため、個別指定に慣れる必要がある。
時間ベースCSS：アニメーションが「現実時間」を認識する
2026年5月のアップデートで、CSSに時間ベースのアニメーション制御が追加された。従来の animation-duration や animation-delay に加え、現在の経過時間をCSS変数 --time として参照できる機能が導入されたのだ。
例えば --time: time() と宣言すると、その値はページ読み込みからの経過秒数に自動的にバインドされる。これを calc() や random() と組み合わせることで、時間経過に応じてランダムに色や位置が変化する「疑似生命感」を持ったUIをCSSだけで構築できる。具体的には、時計の秒針風アニメーション、ページ滞在時間に応じた背景色のグラデーション変化、スクロール位置と経過時間の両軸で制御するパララックス効果などが考えられる。
ただし、この機能の実装はまだ不完全だ。ブラウザ間で time() が返す値の精度が異なる（Chromeはミリ秒、Firefoxは秒単位）。また、CSS変数にバインドされた time() の値は、スクリプトから読み取り不可なため、JavaScriptとの連携が必要な場合は独自実装が残る。現時点では、純粋に装飾的なアニメーションに限定して使うのが無難だ。
なぜ今、この3つなのか — 開発現場への影響
これらの機能は、すべて「JavaScriptの仕事をCSSが奪う」方向性に沿っている。乱数生成、時間管理、間隔制御。これらの領域は従来、JavaScriptによるDOM操作やスタイル変更を必要としていた。CSS random() と時間ベースCSS、Gap Decorations が揃ったことで、単純な装飾的な動的処理はCSS完結が現実的な選択肢となった。
開発現場への影響は2つ。第一に、ビルドツールの依存度が下がる。CSSだけで乱数や時間を扱えるということは、WebpackやViteでバンドルするJavaScriptの量を減らせる。特に静的サイトやAMPページ、CMSテーマ制作で有用だ。第二に、デザインと実装の距離が縮まる。デザイナーがCSSコードの一部を直接編集してランダムなバリエーションを試せるため、プロトタイピングから本番移行までのサイクルが短縮される。
一方で、これらの機能はまだ「若く」、エッジケースが未発見な状態だ。プロダクションで使う前に、テストとフォールバック（JavaScriptによる代替実装）を用意するのが安全策である。
Baselineの進化が実装を後押し
これらの新機能が短期間で実装された背景には、Baselineプロジェクトの浸透がある。2026年4月のBaselineダイジェストでは、相互運用性が向上した機能として writing-mode と pointer-events が取り上げられた。特に writing-mode は縦書きCSSの確立に貢献し、pointer-events はSVGやカスタム要素でのイベント制御の一貫性を保証する。
重要なのは、Baselineが単なる互換性リストではなく、「いつ、どの機能が安全に使えるか」のリアルタイム指標になった点だ。これにより、ブラウザベンダーは「みんながそろそろ実装すべき機能」を優先的に開発するインセンティブを得た。結果として、2026年春は「実装の波」が集中した。
開発者は、Baselineステータスを常にチェックし、stable がついた機能から積極的に導入する戦略が有効だ。特にCSSの新機能は、JavaScriptのようにトランスパイルやポリフィルが効きにくい。機能検出とフォールバックを組み合わせたグレースフルデグラデーションの設計が、これまで以上に重要になる。
2026年後半の展望：CSSとJavaScriptの境界が曖昧になる
現在の流れを延長すれば、2026年末までにCSSは「動的な装飾」のほとんどを包含するだろう。乱数、時間、条件分岐（@when や @else の議論も進行中）、ループ（@for）。これらが揃えば、CSSはもはや「スタイルシート言語」ではなく「レイアウトと動的制御を統合したDSL」として振る舞うことになる。
こうした変化は、JavaScriptフレームワークの役割にも影響を与える。ReactやVueが担ってきた状態管理とスタイルの結びつきの一部が、CSS自身の機能で代替可能になるからだ。特に、コンポーネント単位のランダム性や時間依存のスタイルは、CSSカスタムプロパティと組み合わせることでフレームワーク非依存で実装できる。
ただし、注意すべきは「すべてをCSSでやるべきではない」という原則だ。アクセス制御やデータバインディング、複雑な状態遷移は依然としてJavaScriptの領域でなければならない。CSSの新しい力は、あくまで「装飾とレイアウトの表現力を拡張する」ためのものだ。過度な依存は、かえってコードの可読性と保守性を損なう。
2026年5月のWebプラットフォームが示したのは、CSSとJavaScriptの共存関係が「棲み分け」から「協調」へと進化しつつあることだ。前者はビジュアルな動的表現、後者はロジックとデータ操作。この境界線を明確に把握し、適切なツールを選ぶことが、これからのフロントエンド開発者の最も重要なスキルになる。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！