[css-color-4] Consider clarifying Highlight system color, and maybe adding a new system color for control background #6008
Description
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
Highlightcolor, 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.
ControlSelectionandTextSelection. - Should Firefox align with the other browsers and make
Highlightpale 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? (Edit: Yes, indeed.) 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">