Beforematch event

The beforematch event allows developers to display content to the user in response to the following actions: - find-in-page (ctrl+f) - element fragment navigation (example.com/#foo) - scroll-to-text navigation (example.com/#:~:text=foo) The event is fired at render timing before these actions scroll the page. The event is fired on the element which contains the text, or in the case of fragment navigation, whichever element has the target id.

Motivation

With the evolution of the web, there are always new and interesting ways that developers choose to organize the information on their pages. Some of these approaches (e.g. the common case of text scrolling), lend themselves naturally to user-agent features like find-in-page. This is not an accident, since find-in-page was designed with common use-cases in mind. However, other approaches like collapsed sections of text do not work well with user-agent features since the page does not get any indication that the user initiated a find-in-page request, fragment navigation, or scroll-to-text navigation. The beforematch event is a step in the direction that allows developers to leverage information that the user-agent already has to make these search and navigation experiences great. Specifically, with hidden but matchable content, it will be possible to process text for find-in-page match in sections that are not visible. In turn, the beforematch event will be fired on hidden (a.k.a. collapsed) sections, allowing the developer to unhide the section. The net effect is that the user is able to use find-in-page or link navigation to find content in collapsed sections -- something that is not currently possible. Even without hidden but matchable features, beforematch is a useful signal to the page which allows custom styling of the matched element, which is now only possible with approximations from scroll positions and intersection observations.

Documentation

Status in Chromium

Blink>DOM


Origin trial (tracking bug) in:

  • Chrome for desktop release 86
  • Chrome for Android release 86

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • No signal
  • No signal
  • No signals

Owner

Intent to Prototype url

Intent to Prototype thread

Last updated on 2020-10-20