v156 · :navigation-source · inspection

Selector parse lab

Four ways to interrogate the selector: does it parse (two parser entry points, cross-checked against a rendered @supports chip), does the idle-page invariant hold (nothing matches when no navigation is running), which elements are eligible sources, and — the part CSS cannot show you statically — a sampler that measures how long the source element stays matched across a real navigation.

Interrogate the selector

@supports chip
Parse & invariant probes (run live)
probeexpressionresult
Eligible source elements (CSS Navigation 1 §2.2)
elementwhy it can be a source
a / areafollowed hyperlinks start navigations
forma submitted form is the navigation's source
input type=submit / buttonthe specific submitter also matches (see the form demo)
div, span, …never — non-interactive elements cannot start navigations, so they can never match

Match-lifetime sampler

The link below starts an intercepted navigation that takes one second. While it runs, the sampler polls link.matches(':navigation-source') and a bystander element every 100 ms.

Navigate for the sampler
  1. No samples yet.

A meaningful probe must be able to fail. On a browser without the feature, matches(':navigation-source') throws SyntaxError — the sampler records that raw result instead of pretending. On Chrome 156 the expected timeline is false before the click, true for the second the navigation is ongoing, false after it settles, and false for the bystander throughout.

see also