[csswg-drafts] [css-values] add function to convert numeric data types to <number> (#6149)

graphicore has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] add function to convert numeric data types to <number> ==
The discussion in #4430 made me think, it would be nice to have a way to convert e.g. a length to a number:

```css
* {
    font-variation-settings: "opsz" convert-to-number(1em, pt);
}

/* If the user default font-size is 16px the above would equal to: */
* {
    font-variation-settings: "opsz" 12;
}
```

`font-variation-settings` is, from my perspective the best use case, as each keyword in it requires a `<number>` and its often related to a `<length>`. This could improve usage of variations that don't have a sufficient or any higher level property a lot, and make them accessible for `calc()` math.

`convert-to-number()` could be used in other cases too and would make it possible to relate properties in a way it is not currently possible without JavaScript. Another example is to control a paused  `animation` state by screen width using something like:

```css
/* a pattern that can be used to reduce @media queries */
.animated {
    animation-play-state: paused;
    animation-duration: 1s;
    animation-delay: calc(-1s * (min(1920, convert-to-number(100vw, px) / 1920));
}
```

Since it's possible to convert a number to a unit-value, like in `calc(1px * 16)  /* -> 16px */ `, it would make sense to have a way to do the inverse: `calc(16px / 1pt) /* -> 1px * 16  / 1px * (4/3) -> 12 */`. But, I don't think this is possible now and it would probably make internal things much more complicated, hence my proposal to add a new function.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6149 using your GitHub account


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

Received on Friday, 26 March 2021 03:59:47 UTC