CSSの進化がすごい！ JavaScriptなしで、遷移元と遷移先で異なる挙動を実現するルートとナビゲーションの連携機能

Post on:2026年8月6日

sponsorsr

HomeページからAboutページに移動する際はページ全体が左にスライド、AboutからHomeに戻る際は右にスライド、このように同じナビゲーションを使用して遷移元と遷移先で異なる挙動を実装するにはJavaScriptが必要ですが、これをCSSで実装できるよう取り組みが進められています。

Declarative Route and Navigation Matching in CSS
by Bramus!

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに
課題: 遷移先を把握すること
ルートとナビゲーションの連携機能のご紹介 👋
フィードバックをお待ちしています！

はじめに

Chromeチームでは以前から、CSSにおいて宣言的な方法でルートおよびナビゲーションのマッチングを行う仕組みについて検討を重ねてきました。私はここ数ヵ月の間、Noam RosenthalやDavid Baronと共にこの課題に取り組んできました。

1月にCSSワーキンググループで概要を紹介し、6月のCSS Dayではデベロッパーたちからフィードバックをいただく機会もありました。そうした経緯を経て、現在さらなる議題を進めるのに十分な段階まで提案内容をまとめられたと考えています。

まさに今ベルリンで開催されているCSSワーキンググループの会議で、進捗状況を発表する予定です。この記事では、そのコンセプトを紹介します。

課題: 遷移先を把握すること

ビュー遷移、特にマルチページアプリケーション（MPA）でビュー遷移を試したことがある人なら、おそらく同じような壁にぶつかったことがあると思います。多くの場合、どのページから移動してきたか、そしてどのページに移動するのかによって、ページのスタイルを変化させたいと思います。

次のシンプルなフローを想像してみてください。

HomeからAboutページに移動する際は、ページ全体が左にスライドするようにします。
AboutページからHomeに戻る際は、ページ全体が右にスライドするようにします。
リスト内のサムネイルをタップして詳細ページに移動する際は、タップされたサムネイルがヒーロー画像に切り替わるようにします。

現時点でこういった挙動を実現するには、JavaScriptを使用してナビゲーションをインターセプトし、URLの指定にpageswapやpagerevealを使って特定し、NavigateEvent.sourceElementを取得した上で、それらの値に基づいてビュー遷移のタイプを動的に設定する必要があります。

実際の動作は、下記のデモページをご覧ください。

デモページ

HomeからAboutに移動する際は左にスライド、AboutからHomeに戻る際には右にスライドされます。また、各サムネイルをタップすると、そのサムネイルがヒーロー画像に切り替わります。

デモのCSSでは、:active-view-transition-type疑似クラスを使用して要素に条件付きでスタイルを適用して、スライドのアニメーションを実現しています。

:active-view-transition-type(from-index):active-view-transition-type(to-about) {
    &::view-transition-group(*) { animation-duration: 0.5s; }

    &::view-transition-new(root) {
        animation-name: slide-from-right;
    }
    &::view-transition-old(root) {
        animation-name: slide-to-left;
    }
}

:active-view-transition-type(from-index):active-view-transition-type(to-about) {

&::view-transition-group(*) { animation-duration: 0.5s; }

&::view-transition-new(root) {

animation-name: slide-from-right;

}

&::view-transition-old(root) {

animation-name: slide-to-left;

}

このデモページのように実現は確かに可能ですが、正しく動作させるために必要なJavaScriptは時間の経過とともに膨れ上がり、かなり複雑になる可能性があります。

そこでわたし達は、ナビゲーションの挙動や見た目の制御をJavaScriptではなく、CSSを用いて宣言的にできないかと考えました。

ルートとナビゲーションの連携機能のご紹介 👋

CSS Route and Navigation Matchingには、ナビゲーションやリンクのスタイルを宣言的に設定できるようにするCSSの新たな主要コンポーネントがいくつか導入されています。

たとえば、「特定のURL間の移動状況に応じて適用されるCSS」があります。以下に、わたし達が提案している内容の要約を紹介します。

1. @routeでルートを定義する

URL文字列を毎回入力する代わりに、url-pattern()関数を使って名前付きルートを定義できます。

@route --home { pathname: url-pattern('/'); }
@route --about { pathname: url-pattern('/about'); }
@route --detail { pathname: url-pattern('/detail/:id'); }

@route --home { pathname: url-pattern('/'); }

@route --about { pathname: url-pattern('/about'); }

@route --detail { pathname: url-pattern('/detail/:id'); }

パターンマッチングはJavaScriptのURLPatternでも使用されており、広く普及しているpath-to-regexpライブラリの構文を用いて行われます。

補足: プロトコル、ホスト名、ポート、パス名、検索、ハッシュの各記述子を使用して、名前付きルートを定義することも可能です。

2. @navigationを使用して、ナビゲーションをクエリする

ここで魔法のようなことが起こります。
@navigationアットルールを使用することで、現在進行中のナビゲーション状態をクエリし、移動元（from）と移動先（to）のエンドポイントを確認できます。

/* HomeからAboutに移動するには左にスワイプ */
@navigation (from: --home) and (to: --about) {
  @view-transition {
    navigation: auto;
    types: slide-all-to-left;
  }
}

/* AboutからHomeに戻るには右にスワイプ */
@navigation (from: --about) and (to: --home) {
  @view-transition {
    navigation: auto;
    types: slide-all-to-right;
  }
}

/* HomeからAboutに移動するには左にスワイプ */

@navigation (from: --home) and (to: --about) {

@view-transition {

navigation: auto;

types: slide-all-to-left;

}

/* AboutからHomeに戻るには右にスワイプ */

@navigation (from: --about) and (to: --home) {

@view-transition {

navigation: auto;

types: slide-all-to-right;

}

名前付きルート（@routeで定義）または直接URLパターン（url-pattern()）に対してクエリを実行できます。

補足: ナビゲーション関係を表すキーワードとしてbetweenとatを導入しました

3. :nav-sourceを使用して、ナビゲーションをトリガーした要素を選択

:nav-source疑似クラスセレクタを使用すると、ナビゲーションを開始した特定の要素を指定できます。これはNavigateEvent.sourceElementをモデルにしています。

たとえば、タップされた特定の画像にのみview-transition-nameを適用したい場合は、下記のように記述します。

@navigation (between: --home --detail) {
  @navigation (at: --home) {
    /* Target the clicked link's image */
    :nav-source img {
      view-transition-name: image;
    }
  }
  @navigation (at: --detail) {
    img#hero {
      view-transition-name: image;
    }
  }
}

@navigation (between: --home --detail) {

@navigation (at: --home) {

/* Target the clicked link's image */

:nav-source img {

view-transition-name: image;

}

@navigation (at: --detail) {

img#hero {

view-transition-name: image;

}

4. :link-to()を使用した高度なリンク選択

また、この仕様では:link-to(...)セレクタを使用して、リンク先の対象に基づいてリンクのスタイルを設定する機能も導入されています。セレクタの引数には名前付きルートまたはurl-pattern()を設定します。これはルート間の複雑なUI遷移を調整する上で、極めて強力な機能です。

/* Target the all links that links to the --detail route */
:link-to(--detail) {
  color: hotpink;
}

/* Target the all links that links to the --detail route */

:link-to(--detail) {

color: hotpink;

}

フィードバックをお待ちしています！

ここ数ヵ月に渡り、わたし達はこの件について深く検討を重ね、主要な機能やその構文について何度も議論を重ねてきました。その結果、ようやく実現可能な案にまとめることができたと考えています。前述の通り、8月に開催されるCSSワーキンググループの会議でこれを発表し、わたし達が正しい方向に向かっているかをグループの皆さんと確認したいと考えています。

CSS Dayでのプレゼンでは会場の反応を見る限り、この取り組みを進める価値があると感じました。もちろん、フィードバックは大いに歓迎していますので、何かご意見やご提案がありましたら、ぜひお聞かせください。

何かユースケースが見落とされていないか？キーワードの設定は適切か？またわたし達が抱えている未解決の問題として、デフォルトのベースURLの扱いがあります。相対リンクはドキュメントの場所を基準に解決すべきか、それともスタイルシートの場所を基準に解決すべきかです。

現在のAPIをご覧いただき、CSSWGの w3c/csswg-drafts#12594にフィードバックをお寄せいただくか、ソーシャルメディア（BlueskyまたはMastodon）にご連絡ください。