[csswg-drafts] [css-ui-3] 'accent-color' spec for checkboxes is incorrect (#5577)

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

== [css-ui-3] 'accent-color' spec for checkboxes is incorrect ==
At the moment, the ['accent-color' proposed text for checkboxes](https://github.com/mfreed7/accent-color/blob/master/proposal.md#input-typecheckbox) says:

> A checkbox is typically composed of a "checkmark" glyph on top of a shaded background. The glyph should be considered a "contrasting" accent, while the shaded background behind the glyph should utilize the "primary" accent color.

This implies that Chrome's rendering of a checked checkbox, which is a white check on a blue background, should be doable via the UA stylesheet saying `input:checked { accent-color: blue white; }`.

However, Chrome currently renders *unchecked* checkboxes with a *white* background. This then implies that *either*:

1. Chrome's UA stylesheet has a more general rule like `input { accent-color: white blue; }` that applies to the non-checked state, so it continues to use the first color (now `white`) for its background.
2. Chrome's UA stylesheet has `accent-color: blue white;` in all cases, but it draws the background of the checkbox using different colors depending on checked state: using the second ("contrasting") color when unchecked, and the first ("primary") color when checked.

If (2) is the case, that's a *big* problem. All other browsers currently draw checkboxes with a white background in both states, implying that when they adopt 'accent-color', they'll be using the same color in both states.  Which color you use for the background is a *very* important decision, as it is the primary determiner of whether the element is visible against its *parent's* background or not. This, thus, would fail the "authors can specify colors and have a reasonable idea of how they'll be used" test.

If (1) is the case, that's fine, but it needs to be clarified that Chrome's default behavior is due to this slightly quirky UA stylesheet rule, and if authors just write `input { accent-color: white blue; }` and nothing else, they will *not* get things acting like Chrome by default. (Instead, it'll create a checkbox that always has a white background, and has a blue check when checked, matching how other browsers currently render their checkboxes.)

----


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


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

Received on Saturday, 3 October 2020 00:24:13 UTC