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.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.