Technical review: Document cross-document view transitions

[chrisdavidmills]

Note: MERGE the corresponding demo updates in mdn/dom-examples#265 as soon as this content has been merged, otherwise the demo links in the content will be broken.

Description

Chrome 123/124 includes features required for developers to create cross-document View Transitions. This includes:

• The PageRevealEvent interface
• The pagereveal event
• The PageSwapEvent interface
• The pageswap event
• The NavigationActivation interface
• The @view-transition at rule
• <link rel="expect">

This PR adds content for all of these. In addition, it:

• Updates the View Transitions API landing page to cover these new features.
• Moves the guide content to a separate "Using the View Transitions API" article.
• Makes some updates to existing view transitions pages, so that they work for SPA and MPA use cases.

Related ChromeStatus entries:

• https://chromestatus.com/feature/5118874666663936
• https://chromestatus.com/feature/5205586941837312
• https://chromestatus.com/feature/5113053598711808

Motivation

Additional details

Related issues and pull requests

• dom-examples demo: DO NOT MERGE YET: Add cross-document view transitions demo dom-examples#265
• BCD: Add data for cross-document view transitions features browser-compat-data#22638

[github-actions]

Preview URLs (32 pages)

• /en-US/docs/Web/API/Document/startViewTransition
• /en-US/docs/Web/API/HTML_DOM_API
• /en-US/docs/Web/API/NavigationActivation/entry
• /en-US/docs/Web/API/NavigationActivation/from
• /en-US/docs/Web/API/NavigationActivation/navigationType
• /en-US/docs/Web/API/NavigationActivation
• /en-US/docs/Web/API/Navigation_API
• /en-US/docs/Web/API/PageRevealEvent/PageRevealEvent
• /en-US/docs/Web/API/PageRevealEvent/viewTransition
• /en-US/docs/Web/API/PageRevealEvent
• /en-US/docs/Web/API/PageSwapEvent/PageSwapEvent
• /en-US/docs/Web/API/PageSwapEvent/activation
• /en-US/docs/Web/API/PageSwapEvent/viewTransition
• /en-US/docs/Web/API/PageSwapEvent
• /en-US/docs/Web/API/ViewTransition/finished
• /en-US/docs/Web/API/ViewTransition/ready
• /en-US/docs/Web/API/ViewTransition/skipTransition
• /en-US/docs/Web/API/ViewTransition/updateCallbackDone
• /en-US/docs/Web/API/ViewTransition
• /en-US/docs/Web/API/View_Transitions_API/Using
• /en-US/docs/Web/API/View_Transitions_API
• /en-US/docs/Web/API/Window/pagereveal_event
• /en-US/docs/Web/API/Window/pageswap_event
• /en-US/docs/Web/API/Window
• /en-US/docs/Web/CSS/::view-transition-group
• /en-US/docs/Web/CSS/::view-transition-image-pair
• /en-US/docs/Web/CSS/::view-transition-new
• /en-US/docs/Web/CSS/::view-transition-old
• /en-US/docs/Web/CSS/::view-transition
• /en-US/docs/Web/CSS/@view-transition
• /en-US/docs/Web/CSS/view-transition-name
• /en-US/docs/Web/HTML/Attributes/rel

Flaws (7)

Note! 29 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/HTML_DOM_API
Title: The HTML DOM API
Flaw count: 5

• macros:
  • /en-US/docs/Web/API/HTMLDirectoryElement does not exist
  • /en-US/docs/Web/API/HTMLFrameElement does not exist
  • /en-US/docs/Web/API/HTMLIsIndexElement does not exist
  • /en-US/docs/Web/API/External does not exist
  • /en-US/docs/Web/API/ApplicationCache does not exist

---

URL: /en-US/docs/Web/API/NavigationActivation
Title: NavigationActivation
Flaw count: 1

• macros:
  • /en-US/docs/Web/API/Navigation/activation does not exist

---

URL: /en-US/docs/Web/HTML/Attributes/rel
Title: HTML attribute: rel
Flaw count: 1

• broken_links:
  • No need for the pathname in anchor links if it's the same page

External URLs (23)

URL: /en-US/docs/Web/API/View_Transitions_API
Title: View Transitions API

• https://developer.chrome.com/docs/web-platform/view-transitions/ (2 times) (Note! This may be a new URL 👀)
• https://http203-playlist.netlify.app/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/view-transitions/mpa/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/view-transitions/spa/ (1 time) (Note! This may be a new URL 👀)
• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)
• https://web.dev/articles/bfcache (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/View_Transitions_API/Using
Title: Using the View Transitions API

• https://developer.chrome.com/docs/web-platform/view-transitions/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/view-transitions/mpa/ (2 times) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/view-transitions/spa/ (2 times) (Note! This may be a new URL 👀)
• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)
• https://web.dev/articles/bfcache (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/PageSwapEvent
Title: PageSwapEvent

• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Window
Title: Window

• https://web.dev/articles/bfcache (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Window/pageswap_event
Title: Window: pageswap event

• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Window/pagereveal_event
Title: Window: pagereveal event

• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)
• https://web.dev/articles/bfcache (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/NavigationActivation
Title: NavigationActivation

• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/PageRevealEvent
Title: PageRevealEvent

• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Document/startViewTransition
Title: Document: startViewTransition() method

• https://mdn.github.io/dom-examples/view-transitions/spa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/@view-transition
Title: @view-transition

• https://mdn.github.io/dom-examples/view-transitions/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/::view-transition-group
Title: ::view-transition-group

• https://drafts.csswg.org/css-view-transitions-1/ (2 times) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/::view-transition-old
Title: ::view-transition-old

• https://drafts.csswg.org/css-view-transitions-1/ (2 times) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/::view-transition-new
Title: ::view-transition-new

• https://drafts.csswg.org/css-view-transitions-1/ (2 times) (Note! This may be a new URL 👀)

(comment last updated: 2024-05-24 15:21:37)