[css-content] Should content property work with non-string variables?

[dauwhe]

On Twitter there was a request for CSS variables to be used with the content property:

label:before {
content: var(--spacing);
}

This works only if the variable is a string.

Are there good use cases for this? There was some skepticism on the Twitter thread.

[tabatkins]

To be more specific about the skepticism: every use-case I've seen presented for this has been "writing CSS tutorials" (or equivalent). This makes sense, as there's virtually no reason for "5px" or "#aabbcc" to show up on a production website. The only case that's remotely plausible for production is formatting a chart with a %, and displaying that % in text as well. No other value type has any business being printed to the page, really.

[AmeliaBR]

I've mentioned elsewhere that I'd like a string concatenation function for using CSS variables in SVG path data. Part of that would have to be converting numerical variables to string data. A concat( x ) function with a single variable as x, containing a numerical or other token, would therefore be a string coercion method.

I think this would therefore be a good way to address the use cases for the content function (and I personally think the chart data value + printed label use case is very interesting), without creating a dedicated CSS function only for string coercion.

[AmeliaBR]

FYI: WICG discussion of this.

FYI 2: If the value of the CSS variable is a plain integer, you can currently hack the conversion to string with CSS counters. Sorry, I couldn't find the original demo I saw of it, but here's my version on CodePen. Again, it's about being able to visually represent a value and also display it as text.

[AmeliaBR]

The discussion in #542 contains another way to address the issue: a string concat function that can also coerce other values to strings.