Chrome、contrast-color と scroll-triggered animations

Google I/O 2026 の What’s new in web UI セッションに沿って、Web UI 向けの更新がまとめられた。contrast-color()、element-scoped view transitions、scroll-triggered animations、scroll-target-group などが含まれる。

#contrast-color()

contrast-color() は入力色に対し、WCAG AA の最小コントラストに基づいて黒または白のうちコントラストが高い方を返す。テキストと背景の色ペアを手で維持しなくても可読性を確保しやすい。

css

.badge {
  background: var(--accent);
  color: contrast-color(var(--accent));
}

Contrast Color Demo（CodePen）

#Element-scoped view transitions

Chrome 147 で導入された element-scoped view transitions は、element.startViewTransition() により特定の DOM 部分木だけでビュー遷移を実行する。view-transition-scope: all によりその部分木だけがスキャンされ、::view-transition 疑似要素はスコープ根に注入される。ページ全体を止めずに複数のビュー遷移を同時実行したり、入れ子にしたりできる。

Element-Scoped View Transitions Lists Demo（CodePen）

#Scroll-triggered animations

scroll-triggered animations は、スクロール境界を越えたときに通常の時間ベース CSS アニメーションを開始する。timeline-trigger でトリガーを定義し、animation-trigger で再生する。IntersectionObserver の宣言的な代替になる。Chrome 146 および Edge 146 で利用できる。

css

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%;
}

Scroll-Triggered Animations Demo（CodePen）

#scroll-target-group

scroll-target-group: auto をナビゲーションリストに指定すると、スクロール位置に応じてアクティブなリンクへ aria-current="true" が付き、:target-current 疑似クラスが適用される。ネイティブな scroll-spy を CSS だけで組み立てられる。

Basic scroll-target-group（CodePen）

#参考文献

What’s new in Web UI (Google I/O 2026)