[csswg-drafts] [css-view-transitions-2] Media query alternative to cross-document opt-in (#8868)

noamr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-2] Media query alternative to cross-document opt-in ==
In #8048, the proposal is to use a new rule for opting-in to cross-document transitions.
This has a few drawbacks:
- You can't opt-out of the transition based on things in the document, e.g. `body.disable-transitions { @cross-document-transitions: allow; }`
- It's totally different from the way you disable of same-document transitions (`::view-transitions { display: none }`)
- Its limited to opting in/out, it requires extensions or JS to allow, for example, different names for cross-document transition.
- It's a bespoke rule, so we have to define how it interacts with other rules and so forth, and developers have to learn it.

Proposing, instead, to use a media-query:
```css
@media (page-tranistion: incoming | outgoing | any | ...` (we can bikeshed this of course)
```
To accomplish the original requirement of disabling cross-doc transitions by default, the default UA stylesheet can be:
```css
@media (page-transition) { 
  ::view-transition { display: none }
}
```

This separates the condition (is this a page-transition?) with the action (the transition should be animated/skipped) and thus allows for more mixing and matching, e.g:
```css
@media (page-transition) or (prefers-reduce-motion) {
  ::view-transition { display: none }
}

@media (page-transition: outgoing)  {
  body.disallow-outgoing-tranistions {
    ::view-transition { display: none }
  }
}
```

We can also change the transition names based on whether this is a page transition:

```css
#my-element { view-transition-name: some-name }

@media (page-transition) {
   #my-element { view-transition-name: some-other-name }
}
```

We also get the JS API for free [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and [`MediaQueryList/change` event](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event) gives the developer all the JS observability they need. There's no need for a `ViewTransition` object.

Note that to enable this, we would have to clearly define in the lifecycle at which exact points in the navigation/rendering lifecycle the page-transition media is matched, and we would have to enable the `::view-transition` pseudo-element when navigating to a page that can potentially trigger a page transition.






Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8868 using your GitHub account


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

Received on Tuesday, 23 May 2023 16:59:36 UTC