CSS 2026 - ブラウザに仕事をさせる新機能まとめ（contrast-color・shape・Anchor Positioning ほか）

2026年のCSSは「ブラウザに仕事をさせる」方向に大きく進みました。これまで JavaScript やライブラリ、あるいは SVG やプリプロセッサで補っていたことが、CSS 標準だけで書けるようになってきています。

この記事では、2026年に Baseline 入りした（または主要ブラウザが出揃った）CSS の新機能を、用途と注意点つきで整理します。Baseline の到達時期は、Google の web.dev Baseline の月次ダイジェスト基準です。

contrast-color(): 背景に応じて文字色を自動で出す

2026年4月に Baseline Newly available になった contrast-color() は、入力した色に対して、コントラストの高い相手色（おおむね黒か白）を自動で返す関数です。

これまで「背景色に応じて文字を黒か白に切り替える」のは、JS で輝度を計算するか、デザイン時に手で決めるのが定番でした。それが CSS だけで済みます。

.badge {
  background: var(--badge-bg);
  /* 背景色から読みやすい文字色を自動で */
  color: contrast-color(var(--badge-bg));
}

動的にテーマ色やユーザー指定色が変わる UI（タグ、バッジ、カラーピッカー連動の要素）で特に効きます。

shape(): clip-path を CSS の言葉で書く

2026年2月に Baseline Newly available になった shape() 関数は、clip-path や offset-path の複雑なパスを、SVG ライクなコマンド文字列ではなく、標準的な CSS 構文で書けるようにするものです。

従来の path() は SVG のパス文字列（M, L, C …）をそのまま渡す必要があり、CSS の変数や単位と馴染みませんでした。shape() なら from と line to / curve to などを CSS の長さ・パーセント・var() を使って記述できます。

.card {
  clip-path: shape(
    from 0 0,
    line to 100% 0,
    line to 100% 80%,
    line to 0 100%
  );
}

var() やレスポンシブな単位を混ぜられるので、これまで「JS でパスを組み立てる」しかなかった可変クリップが CSS だけで完結します。

:active-view-transition: 遷移中だけスタイルを当てる

2026年1月に Baseline Newly available になった :active-view-transition 擬似クラスは、View Transition の最中だけ、ルート要素を狙ってスタイルを当てられるものです。

View Transitions API 自体の使い方は View Transitions API の解説記事に譲りますが、「遷移アニメーション中だけ特定のスタイルにする」「遷移中はある要素を隠す」といった制御が、JS のフラグ管理なしで書けるようになります。

:active-view-transition {
  /* ページ遷移アニメーションの最中だけ効くスタイル */
}

Anchor Positioning: 要素を別の要素に“ひも付け”て配置する

CSS Anchor Positioning は、ツールチップやポップオーバーを、基準となる要素（アンカー）に対して CSS だけで配置できる機能です。2026年に主要ブラウザの対応が出揃いました。

これまでツールチップの位置合わせ（基準要素の右上に出す、画面端で溢れたら反対側に出す等）は、Popper.js / Floating UI のような JS ライブラリの定番仕事でした。それが CSS で書けます。

.button {
  anchor-name: --my-anchor;
}
 
.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top center;          /* アンカーの上中央に配置 */
  position-try-fallbacks: bottom center; /* 上で溢れたら下へ */
}

主なプロパティは anchor-name（アンカーに名前を付ける）/ position-anchor（どのアンカーに紐付くか）/ anchor()（アンカーの位置を参照）/ position-area（どこに置くか）/ position-try-fallbacks（溢れたときの代替位置）です。

@scope: スタイルの影響範囲を CSS だけで区切る

@scope アット規則は、スタイルの適用範囲（スコープ）を CSS だけで限定できる機能です。2026年までに主要ブラウザ（Chrome・Safari に続き Firefox）が対応し、使える段階になりました。

CSS Modules や BEM、コンポーネント単位の CSS-in-JS で解決していた「スタイルの漏れ」を、標準機能で抑えられます。

@scope (.card) to (.card__content) {
  /* .card の中、ただし .card__content より内側は除外 */
  a { color: tomato; }
}

@scope (上限) to (下限) で「ここからここまで」を切れるのが特徴で、入れ子コンポーネントのスタイル衝突を CSS だけで扱えます。

その他: 2026年1月に widely available になったもの

地味ですが効く更新です。

• multi-keyword display（2026年1月 Widely available）: display: inline flow-root のように、外側と内側の表示タイプを明示的に書ける構文
• animation-composition（同 Widely available）: 同じプロパティに複数のアニメーションが効くとき、どう合成するかを定義

何が嬉しいのか

今回の機能群に共通するのは、これまで JS・ライブラリ・プリプロセッサに外注していた仕事を、ブラウザ標準に戻せることです。

依存を減らし、バンドルサイズを削り、メンテ対象を標準仕様に寄せられるのは、長期的に効くメリットです。アニメーション周りは Anime.js や GSAP、Scroll-driven Animations と組み合わせると、表現とメンテ性を両立しやすくなります。

まとめ

• 2026年のCSSは「ブラウザに仕事をさせる」方向に前進。JS/ライブラリの定番仕事が標準機能に戻ってきた
• contrast-color()（4月）、shape()（2月）、:active-view-transition（1月）が Baseline Newly available に
• Anchor Positioning と @scope は2026年に主要ブラウザが出揃い、ツールチップ配置やスタイル局所化を CSS だけで扱えるように
• multi-keyword display と animation-composition は1月に Widely available
• 依存削減・バンドル削減・標準への回帰という実利が大きい。ただし新しめの機能は対象ブラウザの対応確認を忘れずに

「これ、まだ JS でやってたな」という処理が、CSS だけで書ける時代になりつつあります。新規実装の前に、一度「標準機能で済まないか」を確認する癖をつけると、コードが軽くなります。

参考リンク

• Baseline（web.dev）
• contrast-color()（MDN）
• CSS anchor positioning（MDN）
• View Transitions API の解説（当ブログ）
• CSS スクロール駆動アニメーション（当ブログ）