Re: [csswg-drafts] [css-view-transitions-2] Declarative opt-in for cross-document navigations (#8048)

We've been discussing this offline for a while, and our current thought is that we should have a simple, single property that covers the majority of the opt in cases.

Starting from the cases, we want to handle, we can build a table that lists whether the case needs an opt-in, meaning that authors are likely to enable or disable transitions based on the case. We can also list whether the authors are likely to customize the transition for the case.

| case | needs opt-in | needs customization |
| --- | --- | --- |
| same doc navigation |✅|❌|
| cross doc, same origin navigation |✅|❌|
| same site navigation |✅|❌|
| script initiated transition |✅|❌|
| old/new url selection |✅|✅|
| history navigation: back |❌|✅|
| history navigation: forward |❌|✅|
| reloads |✅|✅|
| replace |❌|❓|
| push |❌|❓| 

The rationale here is that if we have a case that needs an opt-in but does _not_ need customization, it should be reflected in the opt-in syntax directly. For cases that either don't need an opt-in, or they need both opt-in and customization, it is reasonable to say that we'll add some way to select based on that case (think media query, although maybe a different @-rule) 

So, given this and combining some of the previous proposals, our current thinking is the following syntax:

```css
@view-transition {
  transition-trigger: [same-document-navigation || cross-document-same-origin-navigation || same-site-navigation || script] | none;
}
```

But what about reloads. We've resolved in https://github.com/w3c/csswg-drafts/issues/8784#issuecomment-1640701514 that reloads should not trigger a transition by default. Having something off-by-default is hard without adding it to the syntax. That is, it's hard to have an off-by-default value for transition-trigger in a reload case, if reloads are only available as a media-style query.

There are two solutions we could think of. First is revisit #8784 and say that reloads do in fact trigger transitions by default. Then that solves it. Second option is to add a bespoke `reloads` property to the `@view-transition` syntax:
```css
@view-transition {
  transition-trigger: [same-document-navigation || cross-document-same-origin-navigation || cross-site-navigation || script] | none;
  reload: allow | disallow;
}
```

That also solves it, since we can have a default disallow value.

For completeness, we'd also want to add the following media-style queries (I'm not sure what the @-rule should be called, and whether it should be `@media` proper):
* back history traversal
* forward history traversal
* history jump -- maybe? if the history traversal is larger than 1 step, or just adding the step count as a parameter
* reload navigation
* push
* replace
* old/new url selection

We also want to add the ability to specify a `transition-name`, which goes along with the resolution here https://github.com/w3c/csswg-drafts/issues/8960#issuecomment-1640742768. It's a way to specify a type of the transition and be able to set styles based on that type, in some specialized way.

The media-style queries and transition-name is something we should file separate issues about (or reuse some of the issues already filed), but let's focus the discussion here specifically on the opt-in syntax

-- 
GitHub Notification of comment by vmpstr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8048#issuecomment-1664904618 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 4 August 2023 03:00:43 UTC