[css-navigation-1] Allow navigation-param() to specify whether it should read params from the old/new/current URL #13179
Description
As it is currently proposed, navigation-param() always extracts parameters from the current active URL. For example, this finds the .movie-title that links to the --movie-details route with the :id set to the current page’s :id:
.movie-container:has(
> .movie-title:link-to(--movie-details with (id: navigation-param(id)))
) {
/* … */
}(This examples assumes the adjustment I did in proposed in #13163)
I don’t think this allows me to cover all scenarios. In many cases, you would want to access from either the old or new URL.
For example, when going from --movies-detail to --movies-overview, I want to shrink the big hero image (on the old page) into the thumbnail (on the new page) by:
- On the old page: Giving the
#hero imgtheview-transition-nameofposter - On the new page: Giving the thumb that links to the old page the
view-transition-nameofposter
(And when going in the other direction, it should be the other way around)
For this second part, the navigation-param() needs to be able to specify which URL to read the param from.
👉 My suggestion to have navigation-param() accept an extra parameter to specify which URL to read it from.
My initial thought here is for this to be a [<navigation-keyword>](https://drafts.csswg.org/css-navigation-1/#typedef-navigation-keyword) (so the values would be from, to, or at).
While discussing this internally, @noamr also mentioned that in most cases (but not all, e.g. a --movies-detail to --movies-detail navigation) one most likely just wants to read either the value from the “the other” URL so most likely we would need to add an extra keyword for that as well … going with other for now.
With this proposal, one can do this:
/* Routes definition */
@route --movies-overview {
pattern: url-pattern("/:lang/movies");
}
@route --movies-detail {
pattern: url-pattern("/:lang/movies/:id");
}
/* When navigating from the detail page to the overview page, or back */
@navigation (
(from: --movies-detail) and (to: --movies-overview)
or
(from: --movies-overview) and (to: --movies-details)
) {
/* On the detail page */
@navigation (at: --movies-detail) {
/* Give the big hero img a v-t-name */
#hero img {
view-transition-name: poster;
}
}
/* On the overview page */
@navigation (at: --movies-overview) {
/* Give the thumb that links to the detail page a v-t-name */
#list a:link-to(--movie-details with (id: navigation-param(other, id))) img {
view-transition-name: poster;
}
}
}