Proposal introduces CSS navigation matching for declarative cross-document view transitions

The proposal introduces two new CSS at-rules, @location and @navigation, that let authors declare which page-to-page navigations should trigger a view transition. By naming source and destination locations with identifiers, the rule can match a navigation without any JavaScript. This moves the responsibility for defining transition sources from script to stylesheet.

A location can be defined by an exact pathname, a URL pattern that captures segments, or additional descriptors such as hash, port, hostname, protocol, or search query. The @navigation rule uses logical operators like and, between, and not to combine source and destination identifiers, and can nest an @navigation (at:) block to apply styles at the start of a transition. Pseudo-elements like :nav-source and pseudo-classes like :link-to let authors style the element that initiates the navigation or links that point to a defined location.

Adopting the feature requires learning the new at-rule syntax and adjusting site URL structures so that patterns can distinguish the routes you want to match. In cases where URLs are flat, developers may need to add query parameters or other segments to make pattern matching work. Because the specification is still a draft, the exact spelling and behavior of the at-rules and pseudo-selectors may change before implementation.

Until browsers implement the at-rules, the approach will not work and developers must continue to manage view transitions in JavaScript. Even after implementation, sites with shallow URL hierarchies will find the matching limited unless they restructure their routes. Consequently, the proposal offers a declarative alternative today but remains dependent on future CSS engine support and suitable URL design.