最近、CSSの進化が本当にすごいなと感じる場面が増えてきました。以前はJavaScriptで書いていた処理が、CSSだけで実現できるようになっているんですよね。2026年時点で主要ブラウザに対応している「使える」モダンCSSテクニックを整理してみたので、共有します。

フォーム関連のCSS新機能

1. :user-invalid / :user-valid でJS不要のフォームバリデーション

以前はフォームのバリデーション表示にJavaScriptでblurイベントを検知して、classを付け替える必要がありました。今は:user-invalidと:user-validという疑似クラスが使えます。

input:user-invalid {
  border-color: red;
}
input:user-valid {
  border-color: green;
}

ユーザーが実際に操作した後（フォーカスを外した後）にのみスタイルが適用されるので、ページ読み込み直後に全フィールドが赤くなるような問題も起きません。これだけでフォームのUXがかなり改善されますね。

2. field-sizing: content でテキストエリアの自動リサイズ

テキストエリアの高さを内容に合わせて自動調整する処理、以前はinputイベントを監視してscrollHeightを取得する定番のJS処理が必要でした。

textarea {
  field-sizing: content;
  min-height: 3lh;
}

たったこれだけ。lh単位は行の高さを基準にした単位で、最小3行分の高さを確保しつつ内容に応じて自動拡張されます。

レイアウト・レスポンシブ関連

3. Container Queries が本番投入可能に

メディアクエリは画面全体のサイズに応じてスタイルを変えますが、Container Queriesは親要素のサイズに応じてスタイルを変えられます。Interop 2026の取り組みもあり、ブラウザ対応率は95%以上に達しました。

コンポーネント単位でレスポンシブ対応できるので、コンポーネントベースのフロントエンド設計と非常に相性が良いですね。

4. scrollbar-gutter: stable でレイアウトシフト防止

スクロールバーの表示・非表示でページがガタつく問題、地味に厄介でした。scrollbar-gutter: stableを指定すると、スクロールバーの分のスペースが常に確保されるので、コンテンツの長さが変わってもレイアウトがずれません。

5. width: stretch で利用可能スペースを自然に埋める

width: 100%だとpadding分はみ出す問題、calc(100% - 40px)で逃げるのが定番でしたが、width: stretchなら親のコンテンツ領域をぴったり埋めてくれます。マージンもきちんと考慮されるので、calcの計算ミスから解放されます。

アニメーション・エフェクト関連

6. interpolate-size: allow-keywords でheight: autoのアニメーション

アコーディオンUIで「height: 0」から「height: auto」へのトランジション、長年CSSだけでは不可能とされてきました。JSでscrollHeightを計測してからアニメーションさせるのが定番でしたね。

:root {
  interpolate-size: allow-keywords;
}
.accordion {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.accordion.open {
  height: auto;
}

ルートに1行追加するだけで、autoキーワードへのアニメーションが可能になります。これは個人的にかなり衝撃的でした。

7. backdrop-filter でフロストガラス効果

背景をぼかしたフロストガラス風のUIを作るのに、以前は疑似要素とz-indexの組み合わせが必要でした。今はbackdrop-filter: blur(12px)一行で実現できます。Safari/Chrome/Firefoxすべて対応済みです。

8. oklch() で知覚的に均一な色操作

デザインシステムでカラーパレットを作るとき、HSLだと明るさや彩度の感じ方が色相によってバラバラでした。oklch()を使えば、Lの値だけ変えるだけで知覚的に均一な明暗バリエーションが作れます。ブランドカラーのライト・ダーク展開が楽になりますね。

インタラクション・状態管理

9. overscroll-behavior: contain でスクロール連鎖防止

モーダル内でスクロールしたとき、底に達すると背景ページまでスクロールが波及する問題。以前はwheelイベントをpreventDefaultする必要がありました。overscroll-behavior: containで解決です。

10. :target-current でスクロールスパイをCSS化

目次のハイライト表示（スクロールスパイ）にIntersectionObserverを書いていた方、朗報です。:target-current疑似クラスを使えば、現在のスクロール位置に対応するアンカーリンクに自動でスタイルが適用されます。

11. @container scroll-state() でスティッキーヘッダーの状態検知

position: stickyの要素が「くっついた」状態を検知するのに、以前はスクロールイベントのリスナーが必須でした。@container scroll-state(stuck: top)で、CSSだけでスタイルを変えられます。

設計・保守性の向上

12. CSS @function でSass不要のロジック再利用

CSSにネイティブの関数定義が来ました。Sassの@functionと同じように、再利用可能な計算ロジックをCSS側で定義できます。

@function --fluid(--min, --max) {
  @return clamp(var(--min), ..., var(--max));
}

ビルドツールへの依存を減らしつつ、DRYなCSSが書けるようになりますね。

13. if() 条件式でインラインの条件分岐

CSSにif文が来るとは思いませんでした。カスタムプロパティの値に応じてスタイルを切り替えられます。

.btn {
  background: if(
    style(--variant: primary): blue;
    else: gray
  );
}

14. corner-shape: squircle で角丸の進化

iOSのアプリアイコンのような、滑らかな角丸（スクワークル）がCSSで実現できるようになりました。clip-pathで大量の座標を打つ必要はもうありません。

15. attr() type() で属性値の型付き取得

HTML属性の値をCSSで直接利用できるattr()が拡張され、型を指定できるようになりました。data属性に数値を入れてプログレスバーの幅にする、といったことがJS不要で実現できます。

まとめ

2026年のCSSは、もはや「見た目の定義言語」を超えて、インタラクティブなUI構築の主力ツールになりつつあります。特にフォームバリデーション、アコーディオン、スクロールスパイあたりは、JSで書いていた定番処理がCSSだけで完結するので、実務でのインパクトが大きいですね。

もちろん、すべてのブラウザで完全に動作するわけではないので、Can I Useでの対応状況確認は引き続き必要です。また、2026年のWeb開発ガイドでは、今回紹介した以外のツールやフレームワークの動向もまとめているので、合わせて読んでみてください。