Cross-Document View Transitions for MPA: you need @view-transition to opt-in, not the meta tag

~

📣 PSA: Time to update your MPA View Transitions experimentations!

The opt-in for Cross-Document View Transitions for MPAs (aka: “just websites”) is by means of the @​view-transition at-rule in CSS.

@view-transition {
  navigation: auto;
}

This opt-in needs to be present on both pages participating in the View Transition.

The meta tag that you might know from before was a temporary thing while the feature was being developed behind a flag. The meta tag no longer does anything and was removed in Chrome 125, it’s the CSS opt-in that you need.

Cross-Document View Transitions are shipping to stable (read: enabled by default for all users) in Chrome 126.

If you haven’t been following, there’s also two new things that you can use with View Transitions nowadays:

1. View Transition Types
2. view-transition-class

See https://developer.chrome.com/blog/view-transitions-update-io24?hl=en for an overview (text + video) of all additions and improvements.

~

Spread the word

Feel free to repost one of the posts from social media to give them more reach, or link to this post from your own blog.

📣 PSA: Time to update your MPA View Transitions demos!

The opt-in for Cross-Document View Transitions for MPA is by means of the @​view-transition at-rule in CSS.

The meta tag from before was a temporary thing while the feature was being developed behind a flag. pic.twitter.com/ly29v1Z5wn

— Bramus (@bramus) May 24, 2024

~