[css-forms-1] For control-value() to be useful it needs a way to convert to other types. · Issue #11842 · w3c/csswg-drafts (original) (raw)

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()) * 100), type(), "%"); }

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(), "%") * 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()); /* or convert(content-value(), type()) */ }