You're viewing a single thread.
I, uh, hate that radius calculation. Why does the radius need to be reactive? What do you stand to gain over just setting to like 3 or 4px and moving on with your life?
Junior webdev points.
Cool. Help me learn then by answering my questions.
He did
[...] Why does the radius need to be reactive? What do you stand to gain over just setting to like 3 or 4px and moving on with your life?
Junior webdev points
AKA you gain nothing.
Oof, I might have wooshed there. Totally read that comment as criticizing my inquiry as things a Jr would ask and not as the implementation being "look what I as a Jr can do!"
I'm not sure how this relates to the shared post. I'm just searched the article for "radius" and only found one example where a variable is defined then used later. Were you talking about this ? Or can you clarify what "radius calculation" you hate ?
They're referring (I believe) to the screenshot right at the top of the article, which includes this absurd calculation:
border-radius: max (0px, min(8px, calc( (100vw - 4px - 100%) * 9999)) );My guess (hope!) is that this is not 'serious' code, but padding for the sake of a screenshot to demonstrate that it's possible to use each of these different features (not that you should!).
It‘s used in Facebooks css. Remembered it from a nice article from Ahmad Shadeed. And while this limbo sure has some usefulness, it‘s way too obscure to use for the fun of it.
To add to this: CSS really has come a long way. This border-radius example can be done with Container Queries by now, which has quite good support already.
border-radius: max(0px, min(8px, calc( (100vw - 4px - 100%) * 9999)) );
Oh I missed this. I think it's only here to showcase doing math between different units, which is really nice in my opinion. I'm thinking about a few instances where I had to resort to dirty JS hacks just because CSS did not support this at the time