モダン CSS / Web API の対応状況(2025-2026)

調査時点: 2026-04。ブラウザのバージョンとサポート率は当時の値で、Baseline の区分は時間とともに Newly → Widely に進む。

Baseline は、主要ブラウザで Web 機能が利用できる状況を示す共通の目安(Newly available / Widely available の 2 段階)。このページでは、画面遷移をアニメーション化する View Transitions などの機能について対応状況を整理する。

対応状況の早見#

機能	状況(2026-04)	補足
View Transitions(同一ドキュメント)	Baseline Newly Available(Firefox 144、2025-10-14 で到達)。Chrome 111+、Safari 18+、Firefox 133+	React 19.2 に `<ViewTransition>`、Next.js 16 が採用
View Transitions(クロスドキュメント / MPA)	Chrome 126+、Safari 18.2+。Firefox 未対応だが Interop 2026 の対象
CSS Anchor Positioning	Chrome 125+、Safari 26、Firefox 147+(2026-01)。グローバル約 76%	`inset-area` → `position-area`、`position-try-options` → `position-try-fallbacks` に改名(Chrome 129)。polyfill は `@oddbird/css-anchor-positioning`
Popover API	Baseline Widely Available(2024-04)	2025 追加: `popover=hint`、`closedby`(Chrome 134+)、Invoker Commands(Chrome 135+)
Scroll-driven Animations(`animation-timeline: scroll()` / `view()`)	Chromium 先行。Firefox・Safari も対応したが Baseline Newly 止まり。Safari 未対応との記述も混在	参照時に再確認
CSS Nesting / Container Queries	Baseline Widely Available
`text-wrap: balance`	Baseline Newly(2024)。Chromium 6 行、Firefox 10 行まで	`text-wrap: pretty` はオーファン防止特化で計算コストが低い。全ブラウザ安定は未確認
`oklch()`	92% 超(2025 Q2)。Chrome 111+、Safari 15.4+、Firefox 113+	Tailwind CSS v4 が既定パレットを OKLCH 化
`light-dark()`	Chrome 123+、Firefox 120+、Safari 17.5+
Speculation Rules API	Chromium 系のみ。Firefox・Safari はルールを無視	`prerender` と `prefetch`、`eagerness` で発火タイミング制御。SPA 非対応、フルページ遷移のみ

View Transitions の 2025 年追加#

view-transition-name: match-element(一意名の自動生成)
Nested view transition groups(Chrome 140+)
document.activeViewTransition(Chrome 142)
ViewTransition.waitUntil()

Astro の View Transitions は遷移時に <html> の属性(lang・data-theme など)をリセットする既知の問題がある。詳細は Astro 5 の主な機能と注意点。

Scroll-driven Animations の定石#

transform / opacity / filter だけをアニメーションすると GPU オフロードされる。width / height / box-shadow は再レイアウトを起こす。will-change は最小限に。
prefers-reduced-motion: no-preference と @supports の機能テストをセットで書く。

1
@media screen and (prefers-reduced-motion: no-preference) {
2
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
3
    .card {
4
      animation: fadeInUp linear both;
5
      animation-timeline: view();
6
      animation-range: entry 0% entry 100%;
7
    }
8
  }
9
}

2025 年の新機能(CSS Wrapped 2025)#

::scroll-button() / ::scroll-marker(): JS なしのネイティブカルーセル。
scroll-state queries(Chrome 133+): stuck / snapped / scrollable を CSS で検知。
sibling-index() / sibling-count(): スタガーアニメーション用。
text-box-trim / text-box-edge: テキスト上下の余白トリミング。
shape() 関数: 複雑なクリッピングをレスポンシブに。
if(): CSS 内のインライン条件分岐(experimental。Firefox / Safari 対応は未確認)。
corner-shape: squircle / notch / bevel など。
appearance: base-select: <select> を完全にスタイル可能に。

更新履歴#

2026-04-19: 初版(ローカル調査ノート)
2026-10-17: Wiki へ移植、概念ページとして再構成。冒頭に定義を追加