This content originally appeared on Bram.us and was authored by Bramus!
Over at CSS-Tricks you can read a min-bending article by Temani Afif
Since the introduction of media queries (literally decades ago), CSS has evolved to the points that there are a lot of tricks that can help us drastically reduce the usage of media queries we use. In some cases, I will show you how to replace multiple media queries with only one CSS declaration. These approaches can result in less code, be easier to maintain, and be more tied to the content at hand.
Common theme in all code shown is the use if max() and clamp(), resulting in code that’s hard to grasp:
grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (var(--n) + 1) + 0.1%, (var(--w) - 100vw) * 1000, 100% / (var(--m) + 1) + 0.1%), 1fr));😵😵
Be sure to stick around for the More Tricks section of the post, as it also holds some nice things you can do:
- Conditional background color
- Toggling an element’s visibility (by conditionally limiting the
height/width) - Changing the position of an element
While I do like the results, I’ll stick to using the more readable CSS Container Queries syntax once that becomes stable 😅
Responsive Layouts, Fewer Media Queries →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-11-29T22:48:55+00:00) Responsive Layouts, Fewer Media Queries. Retrieved from https://www.scien.cx/2021/11/29/responsive-layouts-fewer-media-queries-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.