[css-view-transitions-2] Syntax for navigation-matching #8925
Description
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:
@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
aelement is clicked, the current URL at the time of clicking is the old URL, and thehrefis 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
popstateevent is fired, and the new one is the new URL. - Type is navigation/back-forward/reload, which maps to the existing "navigation timing type" 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.
@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 [css-view-transitions-2] MPA: Reacting to the old/new page type #8683 would not work, because it requires parsing the new active document before the old one is deactivated.
- This helps with [css-view-transitions-2] CSS only way to transition between list <-> detail views #8209 but doesn't solve it completely. In the future we might want to have some sort of
apseudo-class that matches a particular link with the current navigation or so, see [css-view-transitions-2] CSS only way to transition between list <-> detail views #8209 (comment) - There are many ways to navigate inside a document, capturing
<a href>clicks is a common one but not the only one. This is OK though, this functionality is completely reproducible in JS - the same-document<a href>behavior is a nice default that aligns with the cross-document behavior.