[csswg-drafts] [css-view-transitions-2] Syntax for navigation-matching (#8925)

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

== [css-view-transitions-2] Syntax for navigation-matching ==
Proposing a syntax for matching one or more "navigations" as being the current ones, to be matchable in media-queries (and later other places).

A lot of the issues with view-transitions, especially cross-document, are around using different transitions based on different characteristics of the navigation:
#8784 (different transition for reload)
#8685 (different transition for back/forward)
#8683 (different transition for page type, e.g. home->article vs. articles->article)
#8209 (list<->details)
#8048 (opt-in for cross-document transitions)

These issues circle around some sort of url pattern matching, but adding url patterns to media queries seems verbose and might create duplications.

The proposal here is to use a @ rule that names a navigation-matcher, and then use it in media queries. For example:
```css
@navigation to-article {
   match: urlpattern(/article);
   type: navigation back-forward;
   direction: outgoing;  
}

@media (navigation: to-article) {
   a.article { view-transition: hero };
}
```

In the spirit of #8677 (keeping MPA/SPA APIs compatible), the concept of navigation-matching here is not specific to MPAs.

A navigation always has an "old" and "new" URL, and a type. The current navigation is updated in the following scenarios:
- When a document is activated, the previous active document's URL is the old URL and the active document's URL is the new URL. 
- When an `a` element is clicked, the current URL at the time of clicking is the old URL, and the `href` is the new URL. This creates a referable point in time for "same-document navigations", which are not a defined term.
- When popping the state (same-document back/forward), the old document is the one right before the `popstate` event is fired, and the new one is the new URL.
- Type is navigation/back-forward/reload, which maps to the existing ["navigation timing type"](https://w3c.github.io/navigation-timing/#dom-navigationtimingtype) concept

Notes:
- Exposing previous URLs in this scenarios should adhere by referrer-policy and any other policy. i.e. CSS should only know about the previous cross-origin URL only if that information is also available in other means. 
- Several navigation matchers can match the current navigation at the same time, e.g. with wildcard URL patterns.
- This makes it possible to customize when cross-document transitions are enabled, e.g.

```css
@auto-view-transitions: same-origin; // bikeshedding the opt-in, see #8048
@media (navigation: to-article) {
@auto-view-transitions: none;
}
```

- The "page type" alternative proposed in #8683 would not work, because it requires parsing the new active document before the old one is deactivated.
- This helps with #8209 but doesn't solve it completely. In the future we might want to have some sort of `a` pseudo-class that matches a particular link with the current navigation or so, see https://github.com/w3c/csswg-drafts/issues/8209#issuecomment-1577968963
- 


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8925 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 18:29:00 UTC