[csswg-drafts] [css-forms] Standardize mechanism for styling `<meter>` based on value (#11336)

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

== [css-forms] Standardize mechanism for styling `<meter>` based on value ==
In [CSS Forms](https://drafts.csswg.org/css-forms/#slider-pseudos) we have a shape for the elements of a meter:

<meter>
├─ ::slider-track
 │  └─ ::slider-fill
 
However, for this to be useful for styling we need some way to style based on how optimal the value of the meter element is.

WebKit (and blink) uses different pseudo elements instead of a single `:slider-fill` equivalent and their naming is `::-webkit-meter-even-less-good-value`, `::-webkit-meter-suboptimum-value` and `::-webkit-meter-optimum-value`.

Firefox has a single `::-moz-meter-bar` pseudo element and instead applies pseudo classes to `<meter>` these are `:-moz-meter-sub-sub-optimum`, `:-moz-meter-sub-optimum` and `:-moz-meter-optimum`.

Using pseudo classes seems the better approach between the two. I suspect we can drop the meter prefix and just go with something like `:sub-sub-optimum`, `sub-optimum`, `optimum`? But naming would need bikeshedding as neither Firefox's nor WebKit's seem great.


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


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

Received on Saturday, 7 December 2024 21:48:35 UTC