Skip to content

[css-pseudo-4] system colors for ::search-text #10329

@delan

Description

@delan

What should the default UA styles for ::search-text (#3812) be in impls that support it? We could add system colors analogous to ‘Highlight’ + ‘HighlightText’ or ‘Mark’ + ‘MarkText’:

:root::search-text { background-color: Search; color: SearchText; }
:root::search-text:current { background-color: CurrentSearch; color: CurrentSearchText; }

Major impls that use a fixed background color to highlight search results also use a fixed foreground color (demo). Firefox uses fixed background and foreground colors, but swaps them if that would improve contrast, which is allowed for UA styles per #6150. Safari uses fixed background and foreground colors for the current search result (black on yellow NSTextFinder bubble), but does not use color to highlight other search results.

As a result, one drawback of this approach is, in browsers like Safari that don’t use color to highlight search results, the new system colors won’t mimic the UA default colors for search results, because such UAs would need to define ‘Search’ and ‘SearchText’ as ‘transparent’ and ‘currentColor’ respectively, and I’m not sure that’s allowed. But I would argue against allowing that anyway, in favour of just accepting the inconsistency, for two reasons:

  • Matching pairs of system colors must guarantee contrast
  • If authors mimic the UA default colors of ‘currentColor’ on a ‘transparent’ background in userland search results, without also being able to mimic the other parts of the UA default appearance (such as Safari’s page dimming), their search results would be invisible, which is counterproductive
Screenshots of major impls

image

image

image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Wednesday afternoon

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions