Search

New Code Requirement for Multi Page View Transitions

If you want to use multi-page view transitions, this used to be a prerequisite:

<meta name="view-transition" content="same-origin">Code language: HTML, XML (xml)

That’s dead. Now you do this:

@view-transition {
  navigation: auto;
}Code language: CSS (css)

Thanks to Bramus for the PSA and update article.

I imagine we’ll see PRs a lot like this!

Real quick here, I think the new Speculation Rules API is worth a mention. See, there is an immediate performance cost to using multi-page view transitions. In order for the browser to understand what and how to transition, it needs to essentially render the page you are navigating to behind-the-scenes, then navigate to it, causing a bit of a delay. Hopefully that’s mitigated by the transition itself a bit, but any performance hit sucks. If the page was already pre-rendered (like it might be with this new API available), it should be smooth as butter.

Wanna learn CSS from a course?

Frontend Masters logo

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.