[css-view-transitions-2] Declarative opt-in for cross-document navigations

[jakearchibald]

Cross-document transitions need some way for both the old & new page to opt-in to a transition.

The SPA API uses JS for this, but it would be nice if cross-document transitions didn't depend on JS.

It feels like this should be in CSS, so it can be influenced by media queries, particularly prefers-reduced-motion.

The tricky part here is it's a "global" setting, so it can't be a CSS property.

Proposal:

@cross-document-transition allow;

@media (prefers-reduced-motion) {
  @cross-document-transition deny;
}

However, I'm just making stuff up here. Is there any prior art here for setting 'global' things?

[khushalsagar]

The current proposed API is using a meta tag for this, similar to other Document global settings like viewport meta tag.

But doing this in CSS would be better, for the reasons Jake mentioned like conditionally doing this based on prefers-reduced-motion.

[LeaVerou]

Would it be useful for this to be more fine-grained? I.e. allow transitions from certain pages/domains but not others?

[jakearchibald]

Yes, that absolutely should be a goal. My preference would be to allow pages to declare themselves to be of a particular type, which is just an ident. Then you can express that you're happy to perform a transition from "article" to "profile" or whatever.

Although, if we go with URLs, https://wicg.github.io/urlpattern/ will be handy.

[jakearchibald]

We chatted with @tabatkins and he's happy with the general shape of the syntax here.

We would need to define what the CSSOM looks like.

It might be worth making @cross-document-transition allow; a shorthand for something like:

@cross-document-transition {
  state: allow;
}

…which would allow us to add other descriptors in future.

In the new page, the opt-in would need to be present before first render. This works out, since CSS in the head is render-blocking.