# The New Era of CSS Navigation Matching Managing page transitions with CSS instead of JavaScript may soon become reality. - **Source:** [CSS-Tricks (feeds.feedburner.com)](https://css-tricks.com) - **Published:** 2026-08-19 - **Topic:** [Software & Engineering](https://brifing.si/c/engineering) - **Original article:** - **On Brifing:** https://brifing.si/s/2bd04c29-7435-42c3-b71d-341bdbc00879 ## Introduction to CSS Navigation Transitions CSS's new proposal enables managing page transitions directly with CSS instead of JavaScript. The @location and @navigation rules allow applying styles during specific page transitions. For example, custom animations can be defined when navigating from '/contact' to '/contact/thanks'. This approach aims to reduce complex JavaScript code, particularly in single-page applications (SPAs), making the development process cleaner and more efficient. ## Details of @location Rule The @location rule is used to define specific URL patterns. For instance, the '/article/:id' template can match all article pages. Various descriptors like pathname, URL pattern, hash, port, and hostname are supported. This flexibility allows developers to create transition rules for different scenarios. It's particularly useful for applications with complex URL structures, offering significant convenience in navigation management. ## Controlling Transitions with @navigation The @navigation rule controls transitions between defined @locations. Transitions can be targeted using 'from' and 'to' parameters or the 'between' keyword. For example, a special animation can be applied when navigating from the homepage to an article. The 'not' operator can exclude specific transitions. This syntax provides flexibility similar to existing CSS media queries, making it intuitive for developers familiar with CSS. ## New Pseudo-classes The proposal introduces new pseudo-classes like :nav-source (or :navigation-source) and :link-to(). :nav-source selects the element triggering the transition, while :link-to() targets elements linking to a specific location. For instance, all links returning to the homepage can be displayed in bold. These features offer important tools for enhancing user experience through subtle but effective visual cues. ## Implementation Scenarios This technique can be used in e-commerce sites for transitions to product detail pages, in blogs for article reading experiences, or in multi-step forms. For example, when moving from the shopping cart to the checkout page, product images can smoothly transition to the new page. Such micro-interactions can significantly improve user experience by providing visual continuity and feedback during navigation. ## Current Limitations The feature has limitations with flat URL structures (where all pages are in the root directory). URL pattern matching requires at least a two-level URL structure. Query parameters could be a workaround, but this would require changes to existing URL structures. Additionally, there are security concerns as target page styles can change based on the source page, potentially opening avenues for exploitation if not properly secured. ## Community Reactions CSS experts are noting the increasing number of @ rules. With @property, @color-profile, @position-try, and now @location, the learning curve is becoming steeper. The community is advocating for a more general solution that could encompass all these structures. However, the potential of this feature when combined with the View Transitions API is generating significant excitement among web developers. ## Future Impact and Importance CSS navigation matching represents a significant step forward in web development. By reducing JavaScript dependency, it enables cleaner, more maintainable code. Although still in early stages, it could be revolutionary for SPAs and progressive web apps. Developers are encouraged to follow the specification's evolution closely and provide feedback, as this feature has the potential to reshape how we think about page transitions in modern web applications. ## Sources covering this story - https://css-tricks.com/css-navigation-matching-early-days/ — --- _Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._