Currently CSS Forms defines control-value() to be able to return a string or number, but for this to be useful we would need a way to convert to other CSS types (#6408 ?).
Take <progress> as an example, it has a position property (which is probably more useful than the value one for this CSS func as it handles the maths between value and max to determine actual progress value) between 0 and 1. This is useful for sizing the fill portion of the control, but for that we'd need a way to make it a (percentage) length instead.
progress::fill {
inline-size: convert(calc(content-value(type(<number>)) * 100), type(<length>), "%");
}
Alternatively if we could pass other types into content-value() and the browser could do the conversion for us that'd also work?
progress::fill {
inline-size: calc(content-value(type(<length>), "%") * 100);
}
Either of these could also help with styling the color input too (along with #11837 )
The default style could be something like:
input[type=color]::color-swatch {
background-color: content-value(type(<color>)); /* or convert(content-value(), type(<color>)) */
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3