静的ウェブサイトにおけるView Transitionsの有効化

普通のウェブサイト、つまり静的なHTMLファイルだけのウェブサイトでも、いわゆるView Transitionsを有効化できるようになっている。しかし、仕様ではSPAやMPAでの話ばかりで、いまいちはっきりと書かれていない。CSSにおまじないを書くと有効化できるようだ。このウェブサイトでは一瞬採用したが、既に削除している。

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

おまじないは@規則を使って記述する。アクセシビリティーを考慮すると、@media規則でprefers-reduced-motionを使って切り替えた方が良いだろう。OSなどの設定を尊重しないと思われるので、プログレッシブ・エンハンスメントの形を取りたい。

遷移元と遷移先が同じドメインで、かつ、両方にこの記述への参照があると、フワッとアニメーションしながら読み込まれるようになる。Chrome 126以降やSafari 18.2以降などで確認できる。Firefoxでは実装が進んでいないような雰囲気だが、そのまま書いておいても無視されるだけなので、使い始めても問題ないはずだろう。ただ、Safariで挙動不審のように見え、これを書くだけでちょっと良くなるようなものではないようだ。