CSS-Tricks Explores CSS Navigation Matching
Exploring Bramus's hypothetical examples for CSS Navigation Matching and community feedback on modern CSS rules.
Stock photo for illustration only, not from the actual event
- Bramus demonstrates hypothetical examples for `@navigation` between locations.
- Syntax ideas include handling transitions between specific pages like contact forms.
- Community feedback suggests unifying at-rules to simplify the learning curve.
- The discussion highlights the growing complexity of modern view transitions.
As web standards continue to evolve, CSS-Tricks has highlighted fascinating early discussions surrounding CSS Navigation Matching. Bramus shared a hypothetical example to illustrate how this feature might take shape as specifications are fleshed out.
The concept introduces a way to query navigation between locations using custom identifiers registered within `@location`. If the navigation matches the specified points, developers can trigger specific styles and behaviors seamlessly.
Stock photo for illustration only, not from the actual event
Another cleaner syntax approach allows developers to fire transitions directly when navigating between specific pages. Key aspects of this proposal include:
- Targeting specific page boundaries using statements like `@navigation (between: --contact and --contact-confirmation)`
- Handling conditional execution when a match does not occur
- Utilizing the `:link-to()` pseudo-class defined in the spec to style elements targeting specific locations
The introduction of specialized at-rules like `@location` and `@navigation` demonstrates a shift toward handling app-like routing logic directly within stylesheets. While this reduces reliance on JavaScript frameworks, it also emphasizes the community's concern over managing an ever-growing list of new CSS rules.
Lee Meyer, a peer in the community, suggested that appending parameters like ?blog to URLs could provide URL pattern matching superpowers. Meanwhile, Preethi shared valuable feedback on the CSS-Tricks Slack channel regarding structural uniformity.
Preethi noted that having a unified at-rule for data infrastructures—similar to `@property`—would streamline configurations compared to managing separate rules like `@color-profile`, `@position-try`, and `@location`.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment