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

> ```css
> /* UA stylesheet */
> @view-transitions :reload {
>   navigation-trigger: none;
> }
>
> @view-transitions {
>   navigation-trigger: none;
> }
> 
> /* user stylesheet: this would enable cross-document VT but *not* reload, due to specificity  */
> @view-transitions {
>   navigation-trigger: cross-document;
> }
> 
> /* user stylesheet: this would enable cross-document VT on reload  */
> @view-transitions :reload {
>   navigation-trigger: cross-document;
> }
> ```

I find this syntax is **very** confusing. It looks like state is added, yet the descriptors inside it apply when the state is no longer active? Tacking those states onto the `@view-transition` rule seems like the wrong place to do so.

Take `:reload` for example:
- This is only active while the page is reloading
- This is a state of the page, not the view transitions itself

The first rule in the block above for example can be interpreted in various ways:
1. While the page is doing a view transition triggered by a reload, don’t allow any other triggers?
2. If the page got reloaded, don’t allow any other triggers
3. If the page got reloaded, don’t do a transition while it is reloading.
4. …

I assume the third is what is meant, but I find the proposed syntax not to reflect this. 

---

Rewinding back to [what was proposed and refined here](https://github.com/w3c/csswg-drafts/issues/8048#issuecomment-1666593022): the idea of the `@view-transitions` rule is only to **configure things**, not to respond to things.

You can still respond to various ways of how the view transition was invoked, but that’s not the responsibility of the `@view-transitions` rule. To respond to the type of navigations, something separate could cover that, e.g. an `@media` rule:

```css
/* 1. VT Configuration */
/* Allow these types of triggers */
@view-transitions {
  transition-trigger: cross-document-same-origin-navigation reload script;
}

/* Disable VTs alltogether when the user does not want it */
@media (prefers-reduced-motion: reduce) {
  @view-transitions {
    transition-trigger: none;
  }
}

/* 2. Tweak the VTs in response to the type of navigation */
/* User has reloaded the page */
@media(navigation-type: reload) {
  ::view-transition-old(root) {
    display: none;
  }
  ::view-transition-new(root) {
    animation-name: fade-in;
  }
}

/* Apply a certain type of animation when navigation from the article detail page to the articles overview page */
@media (navigation: from --article to --articles) {
  ::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  ::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Etc. */
```



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


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

Received on Wednesday, 9 August 2023 15:29:05 UTC