Chrome 156's :navigation-source Lets You Style the Link That Started a Navigation

Chrome 156 introduced the :navigation-source CSS pseudo-class. It matches the link, button or form element that started a navigation, so you can style the thing a visitor just clicked.

Our reading is that its best use is page transitions. If a card on a listing page is the source of the navigation, you can give it a transition name only for that moment, so the card grows into the detail page while the others stay put. Before this, that took script to tag the right element.

It is a good example of a platform feature replacing a small piece of JavaScript that nearly every transition demo needed.

As with most new features, support is limited to Chrome for now, so build the navigation to work without it. If the animation does not run, the visitor should still arrive at the right page without a hitch.

Try it on a gallery or a product grid, where the clicked item is the natural start of the motion.