This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream
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.
This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream
foobartel.com :: Stream | Sciencx (2022-05-18T22:00:00+00:00) CSS Contextual Spacing. Retrieved from https://www.scien.cx/2022/05/18/css-contextual-spacing/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.