CSS Contextual Spacing
published on
In Contextual Spacing For Intrinsic Web Design Stephanie Eckles talks about properties and functions for intrinsic design, which allow you to do some really nice things. You can get rid of using some of your media queries. There are quite a few examples of new properties and functions that, when used properly, will make your code a little prettier, a little more modern and a little more fun, because new ;) One of my favorite examples in this article is the following code, which basically can serve as your new version for a centered container (wrapper) class, spacing included:
.container {
width: min(100vw - 3rem, 80ch);
margin-inline: auto;
}
Below you can find the slightly more advanced rule which uses a CSS custom property with the 80ch
value from above as the fallback, in case custom properties are not supported. Pretty neat.
.container {
width: min(100vw - 3rem, var(--container-max, 80ch) );
margin-inline: auto;
}
So far I haven't worked much with clamp()
and friends yet, but this definitely is something to pack into the toolbox for 2022. I usually don't mind writing media queries, but I’m always game to reduce some of the code required, even if only for convenience. Worth a look at.