[csswg-drafts] [css-pseudo-4] system colors for ::search-text (#10329)

delan has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo-4] system colors for ::search-text ==
What should the [default UA styles](https://drafts.csswg.org/css-pseudo-4/#highlight-ua-styles) for ::search-text be in [impls that support it](https://github.com/w3c/csswg-drafts/issues/10212#issuecomment-2089302563)? We could add [system colors](https://drafts.csswg.org/css-color-4/#css-system-colors) analogous to ‘Highlight’ + ‘HighlightText’ or ‘Mark’ + ‘MarkText’:

```css
:root::search-text { background-color: SearchResult; color: SearchResultText; }
```

Major impls that use a fixed background color to highlight search results also use a fixed foreground color ([demo](https://bucket.daz.cat/work/igalia/0/67.html)). Firefox uses fixed background and foreground colors, but swaps them if that would improve contrast, which is allowed for UA styles per #6150. Safari does not use color to highlight 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 ‘SearchText’ and ‘SearchResultText’ as ‘transparent’ and ‘currentColor’ respectively, and I’m [not sure that’s allowed](https://drafts.csswg.org/css-color-4/#typedef-system-color). But I would argue against allowing that anyway, for two reasons:

- Matching pairs of system colors [must guarantee contrast](https://drafts.csswg.org/css-color-4/#css-system-colors)
- Authors mimicking 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), would make their search results invisible, which is counterproductive

<details><summary>Screenshots of major impls</summary>

![image](https://github.com/w3c/csswg-drafts/assets/465303/0a8c1b4e-7a66-4a62-b7bf-f839de21db97)

![image](https://github.com/w3c/csswg-drafts/assets/465303/f2d49d8c-b016-4ef4-ac11-4efd8a6a4d09)

![image](https://github.com/w3c/csswg-drafts/assets/465303/f98f390a-7e3f-40fa-ae94-e50097f43a5d)
</details>

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10329 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 14 May 2024 05:28:50 UTC