Starting from a curiosity seen on the Facebook CSS Ahmad Shadeed wrote a great article explaining how to change the border-radius without using any media queries at all.
The magic CSS formula is:
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%)
* 9999)));Basically, it uses the min() and max() functions combined with the calc() function to conditionally set a border radius of 0px or 8px.
While it is a super cool study case of what we can do these days with functions in CSS, I find it to be a bit hard to read. A bit too smart maybe :). For sure it’s a very elegant technical solution, and could be also a cool trick to impress colleagues, but if possible I would choose a more readable solution.
By the way, another function that could be used to change elements based on the size is the minmax function.
š Neural Networks from Scratch - Presale
I'm writing a book about the timeless foundational concepts of neural networks for JavaScript developers. Go from if-else to weights and biases by building tiny AI models from scratch!
š Neural Networks from Scratch - Presale
I'm writing a book about the timeless foundational concepts of neural networks for JavaScript developers. Go from if-else to weights and biases by building tiny AI models from scratch!