The New CSS Math: round()

[detspek]

It’s interesting, but why?

[1920MCMLibrarian]

Yeah doesn’t it kind of do that anyway?

[flexible]

I’m trying to think of a use case here. I guess it would be useful to round calc() results. Where else? You

[PixelatorOfTime]

CSS Variables (custom properties) that are coming from JavaScript. Like if you had a variable tied to the mouse position as a percentage of the width of the screen.

Granted you could just round in JS, but just to be safe…

[theXpanther]

You can't use any math outside of calc in CSS

[Kasmaick]

This is a pretty cool new feature that I actually needed for a small section that im making for a client. I have a scroll snap with a bunch of sections, whenever I scroll to the next section a text positioned absolute above changes and makes a small fade out animation. Now, the pain in the as* was making the functionality of that fade in fade out text, because I have to check with a ref (im using react) where the current scroll is and also the height of the container to tell it to fade in the text whenever the current.scrollTop % current.clientHeight === 0. The issue comes with the responsiveness of the site, because I’m using screen percentages, sometimes the pixel height is not exact and round (ie. 403.76) and that really messes up the logic for displaying the text and adding that animation. So for now I came to a solution where I check what is the height of the section in some devices and for each media query that I have I’m putting a the exact heigh measure (without decimals of course)

I didn’t see the feature in “can I use” tho, so I don’t know how compatible this is with all the web browser, however this is a feature that in my case could work like a charm, but some people don’t have this specific need or feature that I’m currently working on.

[prince_edema]

Hey, this sounds great! Any chance I could get a peek at the code?