[csswg-drafts] Allow removal of unit in calc() (#10511)

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

== Allow removal of unit in calc() ==
Currently, it is not possible to remove unit from the result of `calc()` expression. In other words, we cannot convert from [`length`](https://developer.mozilla.org/en-US/docs/Web/CSS/length) to [`number`](https://developer.mozilla.org/en-US/docs/Web/CSS/number).

One use-case of removal of unit is when using `calc()` with `zoom` property. For example, I want to use `zoom` property in such a way that computed value of `zoom` is `1` when viewport width is `375px`, and it increases or decreases when width of viewport increases or decreases respectively.
```css
div {
  zoom: calc(100vw / 375); /* this does not work */
}
```
However, since there is no way to remove unit from the result of `calc()`, there is no way to make the above code work.

The code below shows what I am trying to achieve. This makes use of `resize` event in JavaScript to update the value of `zoom` property. Once it is possible to remove unit from `calc()`, there is no need of JavaScript to do so.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin: unset;">

<div style="padding: 24px 16px;">
 <div style="padding: 16px; border-radius: 4px; box-shadow: 1px 6px 30px rgba(0, 31, 14, 0.25); background-color: #FFFFFF;">
  <div style="aspect-ratio: 16 / 9; border-radius:4px; background-color: #EEEEEE;"></div>
  <div style="margin-top: 25px; display: flex; flex-direction: column; gap: 20px;">
   <div style="aspect-ratio: 311 / 20; border-radius: 27px; background-color: #EEEEEE;"></div>
   <div style="aspect-ratio: 311 / 20; border-radius: 27px; background-color: #EEEEEE;"></div>
   <div style="aspect-ratio: 311 / 20; border-radius: 27px; background-color: #EEEEEE;"></div>
  </div>
  <div style="margin-top: 25px; display: flex; justify-content: center; gap: 35px;">
   <div style="width: 55px; aspect-ratio: 1; border-radius: 50%; background-color: #EEEEEE;"></div>
   <div style="width: 55px; aspect-ratio: 1; border-radius: 50%; background-color: #EEEEEE;"></div>
   <div style="width: 55px; aspect-ratio: 1; border-radius: 50%; background-color: #EEEEEE;"></div>
  </div>
 </div>
</div>

<script>

function calculateZoom() {
 document.body.style.setProperty("zoom", window.innerWidth / 375);
}

window.addEventListener('resize', function () {
 calculateZoom();
});

calculateZoom();

</script>

</body>
</html>

```

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


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

Received on Sunday, 30 June 2024 08:03:08 UTC