CSSが状態を持つ時代：2026年、スタイルと振る舞いの融合点
CSSが状態管理に進出する“境界線の消失”
2026年5月時点のWebプラットフォームでは、CSS単体でアプリケーションの状態を表現・操作する範囲が急速に拡大している。従来JavaScriptが担ってきた「状態の保持とUIへの反映」という責務の一部が、CSSに委ねられつつある。これは単なる糖衣構文の追加ではなく、アーキテクチャ全体の見直しを迫る変化だ。
特に注目すべきは、CSSの擬似クラスやカスタムプロパティが、従来の「スタイル」の枠を超えて「振る舞いの記述」として機能し始めた点にある。:checkedや:popover-openのような状態依存セレクタに加え、スクロール位置やインタラクションの履歴をCSSが直接認識できるようになった。結果として、JavaScriptの役割は「状態の管理」から「状態を超えたロジックの実行」へとシフトしている。
具体的に何が変わったのか：2026年4月〜5月の変更点
2026年4月と5月のWebプラットフォームアップデートを統合すると、以下の3点が実務に直結する。
- Gap Decorations（CSS-Tricks #14で解説）：グリッドやフレックスボックスの「隙間（gap）」に対して直接装飾を施せる。従来は疑似要素やマークアップの工夫が必要だったが、CSS単体で完結する。
random()関数：CSSで乱数生成が可能に。アニメーションのバリエーションやテスト用ダミーデータの生成など、従来JavaScriptで書いていた「軽いランダム処理」をCSSに移譲できる。<select>要素のフィールドサイジング改善とfield-sizingプロパティ：フォームコントロールのレイアウト整合性がCSS側で制御可能になった。
これらの機能は、いずれも「CSSだけで状態や振る舞いを完結させる」方向性を強めている。特にrandom()の導入は、CSSを「スタイル言語」から「表現処理系」へと格上げする象徴的な一歩だ。
CSSとJavaScriptの“適切な分離”を再考する
CSS-Tricksの記事「The Shifting Line Between CSS States and JavaScript Events」は、この変化を鋭く指摘している。従来の「CSSは見た目、JSは振る舞い」という分割は、もはや現実的ではない。例えば、スクロール駆動アニメーションを実装する際、scroll-timelineとCSSカスタムプロパティを組み合わせれば、JavaScriptのscrollイベントを一度も書かずに実現できる。
ただし、ここに落とし穴がある。CSSに状態を持たせすぎると、デバッグが困難になる。カスタムプロパティの値がいつ変更されたのか、どの擬似クラスが適用されているのかを追跡するツールは、JavaScriptのステート管理ほど成熟していない。状態のスコープがドキュメントツリーに依存するため、コンポーネント単位の独立性を保つ設計も難しい。
移行コストと現実的な判断基準
2026年現在、Chrome 130以降、Firefox 125、Safari 18で上記機能の大部分がサポート済み。ただし、random()とGap Decorationsはまだフラグ付きのブラウザもあるため、本番投入前にCan I Useの確認は必須だ。
実務で導入を検討する場合、次の判断基準を推奨する：
- 状態のライフサイクルがコンポーネント内で閉じている（例：開閉、ホバー、選択）ならCSSに寄せる。
- 非同期データや複数コンポーネント間で共有される状態は、引き続きJavaScript（React/Vueの状態管理）で扱う。
random()はUIのバリエーション生成に使うが、シード値を外部から注入したい場合はJS側で管理する。
この境界線は今後も流動的に変化する。CSSが「振る舞いの記述」としてどこまで信頼できるかは、コミュニティの実践知とツールエコシステムの充実にかかっている。
2026年後半に予想される次の一手
次に来るのは、CSSでの条件分岐の強化だ。すでに@when/@elseルールの提案が進んでおり、これが実装されれば「CSSだけで完結するUIロジック」の範囲はさらに広がる。JavaScriptはサーバー連携や複雑なデータ加工に特化し、フロントエンドの「状態と描画」はCSSが担うという未来は、想像ではなく現実のロードマップだ。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！