Skip to content

Commit d2d1913

Browse files
committed
Update introductory material in route matching explainer.
(I was initially thinking of one big update to the explainer, but this part does seem landable as a separate commit, so I may as well do so.)
1 parent 1101fbf commit d2d1913

File tree

1 file changed

+35
-4
lines changed

1 file changed

+35
-4
lines changed

route-matching-explainer.md

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,43 @@
11
# Declarative Route Matching
22

3-
Note: this discusses route-matching at a higher level.
4-
The syntax examples are only examples.
5-
The actual syntax is discussed in https://github.com/WICG/declarative-partial-updates/issues/46 and https://github.com/w3c/csswg-drafts/issues/12594.
3+
[@noamr](https://github.com/noamr) and [@dbaron](https://github.com/dbaron), September 2025 / December 2025
4+
5+
(This document is currently partway through being updated to reflect the current state of the work.)
6+
7+
# Related links
8+
9+
* [current css-navigation-1 specification draft](https://drafts.csswg.org/css-navigation-1/)
10+
* [current specification issues (open and closed)](https://github.com/w3c/csswg-drafts/issues?q=label%3Acss-navigation-1%20is%3Aissue)
11+
* initial syntax discussion for HTML route matching: https://github.com/WICG/declarative-partial-updates/issues/46
12+
* initial discussion for CSS route matching: https://github.com/w3c/csswg-drafts/issues/12594
613

714
# Motivation and Use Cases
815

9-
Provide a way to respond to navigations and route-changes immediately and without requiring to hook into the navigation lifecycle.
16+
[CSS View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API)
17+
provide a way to animate transitions between views in a web site.
18+
The goal of these animations is to help users understand, through visual movement,
19+
the change that happens in a user interface when they take some action.
20+
(In some cases that action changes to a different state of a single page app,
21+
while in other cases that action loads a different page.
22+
View transitions work for both cases.)
23+
24+
Some important use cases for view transitions have proven difficult for authors to do at all
25+
and even more difficult for them to do well
26+
(for example, without getting into incorrect states after back/forward history traversal).
27+
One case that we're focusing on in the design of this feature is the desire to show a transition
28+
between a view that shows a list of items
29+
and another view that shows the details for one of the items in the list
30+
(possibly also retaining the view of the list itself in some form).
31+
We talk about these as a "list to details" transition or "details to list" transition,
32+
and this use case has been discussed for a while
33+
in [w3c/csswg-drafts#8209](https://github.com/w3c/csswg-drafts/issues/8209).
34+
35+
The goal of this feature is to make it easier for authors to declaratively set up styles
36+
for this sort of transition.
37+
This means adding features that:
38+
* match patterns of URLs by exposing [URL Patterns](https://urlpattern.spec.whatwg.org/) in CSS
39+
* apply styles conditionally based on the origin and destination of the current navigation, so that transitions between particular sets of URLs (whether separate documents or separate states/routes within a single page app) can be styled
40+
* style an HTML link based on its target matching both the origin or destination of the current navigation *and* matching a particular URL pattern, which allows matching the correct item within the list in a list-to-details or details-to-list transition.
1041

1142
## Navigation-aware styling
1243
### Framework routers

0 commit comments

Comments
 (0)