Re: [csswg-drafts] [css-values] String concatentation (#542)

> I think we should name it `string()` and rename the GCPM one to `string-get()`, which complements string-set nicely. https://github.com/w3c/csswg-drafts/issues/542#issuecomment-383728441 in 2018 when we started discussing this, because I felt CSS authors would not necessarily understand what strings are. However, @property brings CSS types front and center, so CSS authors need to become familiar with the concept of strings anyway, so calling this function text() or whatever other thing is doing them a disservice.

I don't think CSS authors will have a hard time understanding what `string()` means, especially since the `@property` already brings in the `<string>` type, which they need to be familiar with anyway.

So I give `string()` a vote.

## The user's actual use case

1. Displays a tooltip for the value of the `<input type=range>`.

<img width="382" alt="image" src="https://github.com/w3c/csswg-drafts/assets/2784308/97892574-12dc-4eca-8a12-4f8645b73865">

For now, we're stuck with a relatively hacky approach.

```html
<input type="range" style="--range: 38;" value="30" min="20" max="90" id="range">
<style>
.tooltips::before {
    counter-reset: range_string var(--range);
    content: counter(range_string);
}
<style>
```

Cons: If it's a decimal it can't be displayed, but a lot of times the value of `<input type=range>` is a decimal.

After the improvements, we just need:

```css
.tooltips::before {
    content: string( var(--range, 0) );
}
```

2. https://twitter.com/anatudor/status/1394680457711788038





-- 
GitHub Notification of comment by yisibl
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/542#issuecomment-1879745200 using your GitHub account


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

Received on Saturday, 6 January 2024 16:26:17 UTC