None
EN
Styling the Navigation: Declarative Route and Navigation Matching in CSS
['View More Posts', 'Published Bramus', 'Bramus Is A Frontend Web Developer Belgium', 'Working As A Chrome Developer Relations Engineer At Google. The Moment He Discovered View-Source At The Age Of']
Bram.us
One of the things that we at Chrome have been thinking about for a while now is a way to do declarative route and navigation matching in CSS.
At next week’s CSS Working Group F2F (face-to-face) meeting in Berlin, we’ll be presenting our current line of thinking.
~Say Hello to Route and Navigation Matching 👋The CSS Route and Navigation Matching Specification ( css-navigation-1 ) introduces a few new key components to CSS that allow you to style the navigation and links declaratively.
@route --home { pathname: url-pattern('/'); } @route --about { pathname: url-pattern('/about'); } @route --detail { pathname: url-pattern('/detail/:id'); }Pattern matching is done using the syntax from the popular path-to-regexp library, which is also used by JavaScript’s URLPattern .
You can query the current, ongoing, navigation state using the @navigation at-rule, checking the from and to endpoints.