[csswg-drafts] [css-color-4] Consider clarifying Highlight system color, and maybe adding a new system color for control background (#6008)

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

== [css-color-4] Consider clarifying Highlight system color, and maybe adding a new system color for control background ==
https://drafts.csswg.org/css-color/#css-system-colors defines the `Highlight` color as follows:

> Background of selected items/text. 

On macOS, the background of selected items is different from the background of selected text: Selected text usually has a rather pale selection background (e.g. light blue), and is controlled by the "Highlight color" in the macOS system preferences. And selected items, such as selected list rows or tree rows, have a more intense color (e.g. darker blue). This color is controlled by the "Accent color" in the macOS system preferences.

So it's not obvious which one of these to use for the CSS `Highlight` color. I did a quick survey on my Mac:

 - Firefox uses the macOS "Accent color" for the CSS `Highlight` color, i.e. the color for selected controls / "items".
 - Safari and Chrome seem to use a light blue, regardless of the colors chosen in the macOS system preferences. This light blue is appropriate for text selection, but too pale for the background of a selected tree row, for example.

Questions:

 - Should web pages have the ability to use a system color that is appropriate for the background of selected items like selected tree rows? Is it worth adding a new color for this, or even two, for disambiguation? E.g. `ControlSelection` and `TextSelection`.
 - Should Firefox align with the other browsers and make `Highlight` pale on macOS?

As for prior art, Safari  has two internal CSS colors which do the disambiguation: `-apple-system-selected-text-background` and `-apple-system-selected-content-background`. In my tests, these were exposed to web pages as light blue and dark blue, respectively, regardless of the macOS system settings. I'm not sure why they don't follow the system settings - maybe for fingerprinting reasons? However, Safari also exposes a `-webkit-focus-ring-color` which *does* follow the system accent color, so those bits are already exposed.

Test cases:
 - `data:text/html,<body style="background:Highlight">`
 - `data:text/html,<body style="background:-moz-mac-focusring">`
 - `data:text/html,<body style="background:-webkit-focus-ring-color">`
 - `data:text/html,<body style="background:-apple-system-selected-content-background">`
 - `data:text/html,<body style="background:-apple-system-selected-text-background;">`
 - `data:text/html,<body style="background:-apple-system-control-accent">`


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


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

Received on Wednesday, 17 February 2021 02:09:30 UTC