Skip to content

Latest commit

 

History

History
106 lines (81 loc) · 6.23 KB

README.md

File metadata and controls

106 lines (81 loc) · 6.23 KB
Raw

Explainer: CSS highlight pseudos for find-in-page results

Authors

Introduction

::search-text allows for CSS styling of the search results shown when using a browser’s find-in-page feature.

The proposed pseudo element is classified as Highlight Pseudo-elements, and it follows the same rules as other highlight pseudo-elements. That is, they can be styled by a limited set of CSS properties, represent the active portions of their highlight overlays, and use the highlight inheritance model.

Motivation

Authors would like to customize the highlighted text from find-in-page to have a style consistent with that of the rest of the page. In particular, the existing find-in-page highlights may offer poor contrast, harming accessibility. There is an existing proposal in the CSSWG to add new highlight pseudos for find-in-page results.

Web developers have asked related questions on Stack Overflow, though they do not have many votes:

Proposed Syntax

We propose adding a single highlight pseudo with a pseudo-class to distinguish the current match. Browsers differentiate between the currently matched search result and other search results, but these states are mutually exclusive, so they need not be two separate pseudo-elements and highlight overlays.

::search-text {
  /* Styles for all search results */
}
::search-text:current {
  /* Styles for the active search result */
}
::search-text:not(:current) {
  /* Styles for other search results */
}

The CSS Working Group resolved that find-in-page highlights paint either immediately above or immediately below ::selection highlights to allow for behavior that matches current implementations. Painting them over ::target-text reflects an explicit user intent to identify the search string that is stronger than ::target-text; for ::target-text, you only need to click on a link. Broswers currently clear the selection when entering the find-in-page UI, but a user may select when in that UI. In such cases the selection intent is more recent then that search intent and we expect the selection to paint over the search text. This provides compat with current Firefox and Chrome behaviour.

We do not propose that find-in-page highlight styles have any effect on the tick marks that are sometimes shown in the default browser scrollbars.

Example

::search-text {
  background-color: purple;
  color: white;
}
::search-text:current {
  background-color: gray;
}

Risks

Compatibility

Find-in-page UIs vary across browsers. For example,

  • Chrome

    • Searches are found and updated as the user types their search string
    • The page scrolls to the first match, highlighted in yellow, the active match color, and any active selection is cleared.
    • All matches are marked with bars in the default scrollbar
    • Any additional matches are marked with an inactive match color (orange)
    • Using the browser UI to find the next match moves the active match to the next
    • Selecting when in the find-in-page UI state results in the selection highlight painting over the search text
    • The behavior is not entirely consistent, sometimes showing multiple fragments as matching, or scrolling away from a match.

  • Safari

    • The browser UI allows for varying the search behavior
    • As the user enters a string, the first active matche is found, highlighted in yellow, the remainder of the page is covered by a dark overlay and any selection is cleared.
    • Additional matches are shown in white on the darkened page.
    • The browser UI allows for moving from one match to the next.
    • When the find-in-page browser UI is exited, the current match is converted to the selection and all other matches disappear.
    • The behavior is not entirely consistent in that sometimes inactive matches are not shown, and sometimes the page ceases to be darkened while still in the find-in-page UI.

  • Firefox

    • The browser UI allows for varying the search behavior
    • As the user enters text, the match is highlighted in purple (the inactive match color) and the selection is cleared.
    • Using an arrow in the UI makes a match active, turning the highlight green
    • If "Highlight All" is checked in the UI, all inactive matches are shown in purple, with an active one in green
    • Selecting when in the find-in-page UI state results in the selection highlight painting over the search text
    • The behavior is the most consistent of the browsers discussed here.

The Safari behavior is the biggest risk to achieving compatibility. There may be limitations as to how the highlight may be styled given that it must be rendered over the top of an otherwise darkened page. For this reason the spec will not require UAs to implement the ::search-text pseudo, but if they do imeplement they must implement the spec defined behavior.