CSS Contextual Spacing Bookmark

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.


Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!