Re: [w3ctag/design-reviews] Cross-document View Transitions API (Issue #851)

> On no JS used: We're still unclear on what happens if no JS is used, from the user’s point of view. What transition happens? Like, is it a cross-fade? Something else?

If the author doesn't provide any JS or CSS, i.e. the only addition to the Document is the opt-in, there will be a cross-fade from UA style rules. But customization can be done using CSS.

Load https://valuable-vigorous-sailor.glitch.me/index.html on chrome canary with chrome://flags/#view-transition-on-navigation enabled. The header stays in position (because it has a `view-transition-name`) and the root does a slide + fade animation provided via author CSS.

Our goal is to ensure that simple customization can be purely declarative. But if you need something more complicated, like navigating from a list to the details page of a list item, it requires script. Since the author needs to add a `view-transition-name` to the list item clicked by the user. We do want to make this case declarative eventually. The long term thinking for this is in https://github.com/w3c/csswg-drafts/issues/8209 and https://github.com/w3c/csswg-drafts/issues/8925, we've scoped it out for now.

> Detecting a slow network is notoriously difficult (and not really black & white, you may have had a perfectly fine connection until now), so I don't think the API should depend on it for a baseline decent end-user experience.

That's a fair point. The spec can add a recommendation for UAs, something like: "The UA should skip the transition if there is a significant delay between when the navigation was initiated and when the new Document is no longer render-blocked". The precise threshold for skipping can be left to the UA?

> On that note, it would be good if the CSS code to opt-in to this can be nested within media queries (e.g. see [prefers-reduced-data](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data) and [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) which authorrs may want to take into account). I suspect this is already possible, just bringing it up in case.

+1, media-query support is fundamental to the CSS syntax. Both for the exiting query for prefers-reduced-motion and our long term thinking of adding media queries to allow customization based on the old/new Document URL (see https://github.com/w3c/csswg-drafts/issues/8925).

On that note, we had a discussion today about the ordering subtlety with media queries. For example, if the author CSS is as follows:

```css
@media (prefers-reduced-motion) {
  @view-transitions {
    navigation-trigger: cross-document;
  }
}

@view-transitions {
  navigation-trigger: cross-document;
}
```

Then the media-query declaration would be a no-op since the second rule would win. This is because media queries by design don't add any specificity. We were wondering whether we should have a bespoke syntax to add specificity (instead of media queries) for customizing based on old/new Document URLs. Doesn't seem worth the complexity since authors will have to ensure correct ordering for other queries like `prefers-reduced-motion` anyway. Open to any suggestions here.

> It may be a good idea to advise UAs to start their loading UI when the navigation starts, so that the user does get some feedback that something is happening (possibly in a non-normative note).

Sure. FWIW that's what Chrome is doing but we can add a non-normative note as a recommendation to UAs.

> I meant if the navigation doesn't happen at all because the event was cancelled.

Ah ok. If the navigation is cancelled (script cancelled it, the user hit stop, there was a 204 response), then no transition occurs. On the old Document the only customization an author can do is which elements get a `view-transition-name`. So if some part of code added the names, but another part of code cancels the navigation, those names will not be used for anything until there is a transition trigger.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/851#issuecomment-1650322252
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/851/1650322252@github.com>