Ahmad Shadeed paperwork a bonafide CSS trick from the Fb CSS codebase. The concept is that when a component is the complete width of the viewport, it doesn’t have any border-radius. However in any other case, it has 8px of border-radius. Right here’s the code:
border-radius: max(0px, min(8px, calc((100vw – 4px – 100%) * 9999)));
One line! Tremendous neat. The center of it’s the comparability between 100vw and 100%. Primarily, the border-radius comes out to 8px more often than not. But when the part turns into the identical width because the viewport (inside 4px, however I’d say that half is non-compulsory), then the worth of the border-radius turns into 0px, as a result of the equation yields a detrimental (invalid) quantity.
The 9999 multiplication signifies that you’ll by no means get low-positive numbers. It’s a toggle. You’ll both get 8px or 0px and nothing in between. Attempt eradicating that half, resizing the display, and seeing it sorta morph because the viewport turns into near the part dimension:
Why do it like this fairly than at a @media question? Frank, the developer behind the Fb selection, says:
It’s not a media question, which compares the viewport to a set width. It’s successfully a sort of container question that compares the viewport to its personal variable width.
This can be a extra basic goal resolution because it doesn’t have to know the scale of the cardboard. A media question could be depending on the width of the cardboard.