Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow removal of unit in calc() #10511

Closed
sudo-barun opened this issue Jun 30, 2024 · 6 comments
Closed

Allow removal of unit in calc() #10511

sudo-barun opened this issue Jun 30, 2024 · 6 comments
Labels
Closed as Duplicate css-values-4 Current Work

Comments

@sudo-barun
Copy link

Currently, it is not possible to remove unit from the result of calc() expression. In other words, we cannot convert from length to 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.

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.

<!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>
@cdoublev
Copy link
Collaborator

calc(100vw / 375px) should match <number> | <integer> but I do not think browsers support division/multiplication of dimensions at the moment.

In previous versions of this specification, multiplication and division were limited in what arguments they could take, to avoid producing more complex intermediate results (such as 1px * 1em, which is ²) and to make division-by-zero detectable at parse time. This version now relaxes those restrictions.

https://drafts.csswg.org/css-values-4/#calc-type-checking

@sudo-barun
Copy link
Author

The spec does not mention when the restriction has been relaxed. I would like to know how long it has passed since the change.

@cdoublev Do you know when the change in spec occurred?

@cdoublev
Copy link
Collaborator

It seems like it was about 6 years ago:

@Loirooriol
Copy link
Contributor

The spec explicitly lists this as a L4 addition. https://drafts.csswg.org/css-values-4/#additions-L3

Added unit algebra to calc(), allowing multiplication and division of dimensions.

@sudo-barun
Copy link
Author

Thanks to you both.

I have added created new bug reports for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1905736) as well as Chrome (https://issues.chromium.org/issues/350362795). Lets hope this feature will be available soon.

@SebastianZ
Copy link
Contributor

There were actually already issues filed for this:

Sebastian

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed as Duplicate css-values-4 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@SebastianZ @sudo-barun @Loirooriol @cdoublev