Re: [csswg-drafts] [css-values] Type conversion functions (#6408)

@LeaVerou [mentioned in a CSS Day talk from 2022](https://youtu.be/ZuZizqDF4q8?si=nX75XseyiVOBxcxv&t=2322) some other use cases for explicit type conversion. She used counters to display a percentage on a bar chart. Here's a screenshot of that talk (@LeaVerou Hope that's fine to post it here!):

![Using counter for displaying percentages in `content`](https://github.com/user-attachments/assets/ccbaed4f-64e0-4a35-b876-0d775a70f454)

With explicit type conversion, you could shorten this example to

```html
<div style="--p: 49%">F</div>
```

```css
.bar-chart > div {
  height: var(--p);
}

.bar-chart > div::before {
  content: convert(var(--p), <string>);
}
```

And it would look much less hacky.

> > type conversion functions may also cover type conversion in `attr()`
> 
> If we had multiple functions like that, it could make sense to do it in a generic way. But if `attr()` is the only case, it's probably simpler to just keep the 2nd parameter.

Explicit type conversion is non-exclusive to implicit conversions. So, an `attr()` with a second parameter could coexist. The use cases for explicit conversions are much broader, though.

> > Any string that can be interpreted as a valid `<number>` value [...] to surrounding whitespace I'd say no
> 
> Well, if it's parsing as `<number>`, then I would expect to use https://www.w3.org/TR/css-syntax-3/#parse-a-component-value and ignore whitespace tokens.

Fine for me.

> > So how would you convert a string `"2em"` into a number? Should it just fail?
> 
> Yes, it should fail like in https://drafts.csswg.org/css-values-5/#valdef-attr-number If you want to get a number, you should convert it into a length, and then use `calc()` to divide by `1em` or whatever.

Fair enough. Instead of using `calc()` you could also convert to a length first and then to a number, i.e. `convert(convert("2em", <length>), <number>)`.

-----

> Isn’t there also a proposal somewhere for getting query parameters or fragment identifiers from the stylesheet URL into property value space?

I'm not sure there is one for extracting information from a URL. Maybe you are referring to [linked parameters](https://drafts.csswg.org/css-link-params-1/) to _pass_ parameters to a resource?

If there _was_ some way to extract information from a URL, explicit type conversion could be used to interpret those parameters, though.

Sebastian

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


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

Received on Monday, 2 September 2024 11:27:48 UTC