- From: Luke Warlow via GitHub <sysbot+gh@w3.org>
- Date: Wed, 05 Mar 2025 19:27:32 +0000
- To: public-css-archive@w3.org
https://drafts.csswg.org/css-forms/#targeting-different-meter-states-the-low-value-high-value-optimal-value-pseudo-classes - I don't think these pseudo-classes in their current form can be used to replicate the existing states of a `<meter>`.
The algorithms between Firefox and WebKit/Blink are subtely different but I'll try to explain what the algorithm for three possible pseudo classes could look like (based on Firefox):
```
If optimum < low:
if value < low:
match `:optimal-value`
else if value <= high
match `:sub-optimal-value`
else
match `:sub-sub-optimal-value`
else if optimum > high
if value > high
match `:optimal-value`
else if value >= low
match `:sub-optimal-value`
else
match `:sub-sub-optimal-value`
else
if value >= low && value <= high
match `:optimal-value`
else
match `:sub-optimal-value`
```
it's possible that a `:low-value` and a `:high-value` pseudo class would also be useful but they wouldn't work for styling as browsers currently do (unless I'm missing some interesting combination of them to achieve what I mention above).
--
GitHub Notification of comment by lukewarlow
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11336#issuecomment-2701871938 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 5 March 2025 19:27:33 UTC