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

In general, I like this at-rule approach. 

A few remarks/questions:

1. What is the lifetime when these at-rules apply? In internal conversations I heard that the incoming one would only be alive at the very first frame _(to actually opt in + optionally set up different transition names)_ and outgoing one only at the very last frame of the page.

2. The nested example seems incorrect. I think it should be this, as `::view-transition` is a pseudo of the root :

    ```css
    @media (page-transition: outgoing)  {
      :root:has(body.disallow-outgoing-transitions)::view-transition {
        display: none;
      }
    }
    ```
    
    However, with `@media (page-transition) { ::view-transition { display: none } }` in the UA, in practice the logic would be flipped around, no? Like this:
    
    
    ```css
    @media (prefers-reduce-motion: no-preference) and (page-transition) {
      ::view-transition { display: block; }
    }
    ```
    
    Or, more selectively:
    
    ```css
    @media (prefers-reduce-motion: no-preference) and (page-transition) {
      :root:has(body.allow-outgoing-transitions)::view-transition {
        display: block;
       }
    }
    ```

3. Would this replace the meta tag opt-in? If not, what happens when both are set with contradicting values? More specifically, what happens if the meta tag opts-in, but the the UA default styles (which is essentially an opt-out) is applied?

4. When the outgoing page does not opt-in but the incoming page does, do we then get a simple fade-in of the root or would all transitions get skipped? Put differently: it’s a double opt-in?

5. With the JS approach, one quickly can set up some classes on the root based on the directionality of the page hierarchy. For example, clicking from an overview page to a detail page should slide all stuff to the left, whereas then clicking the home icon should slide all stuff to the right as you’re going back from that detail page to the overview page.

    Maybe there should be some way to pass this type of info from one page to another, which could then also be taken into account in the MQ on the new page? That way, an author can set up the appropriate vt-names and animations, based on that piece of data. In #8048, you proposed for the page URL to be that piece of data. Is this still considered?
    
    _(Not sure if this is essential to this issue, or could be discussed separately.)_

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8868#issuecomment-1560062850 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 20:13:44 UTC