CSSが驚くほど進化しています。かつてJavaScriptが必須だった機能がCSS単体で実現できます。さらに2026年は特に大きな変化の年です。この記事ではモダンCSSの注目機能を紹介します。
JavaScript不要になったモダンCSS機能
まずスクロール状態の検知が変わりました。具体的にはscroll-stateコンテナクエリで要素の固定やスナップを検知できます。つまりJavaScriptのスクロールイベントが不要になりました。また、Chrome 133以降で利用可能です。さらにstuck、snapped、scrollableなどの状態を判定できます。そのためスティッキーヘッダーの実装が簡単になりました。
コンテナクエリの進化
コンテナクエリにはサイズ、スタイル、スクロールの3種類があります。特にCSS Grid以来最も強力なレスポンシブ機能です。しかし実際の採用率はまだ7%程度にとどまっています。また、スタイルクエリで親要素のCSS変数を参照できます。さらにコンポーネント単位のレスポンシブ対応が可能です。このように画面サイズに依存しない設計ができます。
:has()セレクタとCSSネスティング
:has()セレクタは親要素のスタイリングを革新しました。たとえば子要素の状態に基づいて親のスタイルを変えられます。また、CSSネスティングで階層構造を自然に記述できます。さらにCascade Layersで詳細度の制御も容易になりました。つまりSassなしでもモダンな記法が使えます。
@starting-styleとView Transitions
@starting-styleはdisplay:noneからの出現アニメーションを可能にします。特にポップオーバーやモーダルの表示に最適です。また、View TransitionsでDOM変更を滑らかにアニメーション化できます。しかし全ブラウザでの対応にはまだ時間がかかります。それでもプログレッシブエンハンスメントで導入する価値があります。
モダンCSSがもたらす開発の変化
CSSがJavaScriptのUI機能を吸収する流れは加速しています。そのためJSバンドルサイズの削減が期待できます。また、Popover APIでフローティングUIもネイティブ対応になりました。さらにパフォーマンスの向上にも直結します。このようにモダンCSSは2026年のフロントエンド開発に不可欠です。