Re: [csswg-drafts] [css-view-transitions-2] CSS only way to transition between list <-> detail views (#8209)

> > First of all, this is a somewhat different use case, it's not related exactly to list<->details.
> 
> Agreed, going to a page other than the list page is a different use-case. I mentioned it because if we have a proposal which can solve this and the list use-case, we'd favour that over a proposal which only helps with the list use-case.
> 
> In the proposal below, the current Document needs to have link to the new Document in their html. It also looks like the presence of that link doesn't help narrow down which element to target. `body:has(link.details:next)` is equivalent to saying "if the user is navigating to this link". The browser back button is one example, I'm not sure if there will be others where authors are forced to add link elements just to use this CSS. Maybe that's ok.
> 
> ```css
> body:has(link.details:next) #maxiposter {
>   view-transition: poster;
> }
> ```
> 
> I'm evaluating this against the media query option:
> 
> ```css
> @media (next: urlpattern(...)) {
>    #maxiposter { view-transition-name: poster; }
> }
> ```

This is great, though I would probably have something like
```css
@navigation details {
   target: urlpattern(...);
   auto-view-transition: same-origin;
   type: navigate | back-forward;
}
```
> 
> It seems like both would be functionally equivalent (do correct me if I'm missing a case). The media query one seems more ergonomic to me but I'd love dev feedback on that.

However, your suggestion and the rule alternative would require a media-query per item in the list, unless there's some way to use extracted URL-pattern parameters in selectors, e.g.:

```css
@media (next: urlpattern(/details/:id)) {
   .miniposter#{:id} {
     view-transition: poster;
   } 
}
```

Perhaps we need both?

```css
@navigation list-details {
    target: urlpattern(/list), urlpattern(/details?id=:id);
}

@media (navigation: list-details) {
   #maxiposter {
     view-transition-name: poster;
   }

   .item:has(:next, :prev) .poster {
     view-transition-name: poster;
   }
}
```


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


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

Received on Tuesday, 6 June 2023 06:04:44 UTC