This post is just a collection of some CSS tricks and magic I've learned about over the last couple months.

background-repeat: space|round

When you have tiles-type background and you don't a tile to be cut-off.

Source: CSS-Tricks.

scroll-margin-top

Having sticky header (or nav) is pretty common UI pattern. But it's a bit tricky when your app also has anchor links (https://....#section) that users use to navigate between page sections. Header will likely overlay part of the section that user navigated to. scroll-margin-top will help with this.

Source: Bram.us

resize: both

It's not really surprising you can use resize: ... to define how users can resize the textarea (it's the little handle in the bottom right corner). But what I think is pretty cool about it is you can use it elsewhere - for example on iframe - which I personally found very useful when testing responsiveness on certain elements.

Source: Bram.us

place-items

Nifty shorthand for two properties.

place-items: center;
/* ...instead of: */
align-items: center;
justify-items: center;

Source: MDN

inset

Another shorthand:

inset: 10px 20px 30px 40px;
/* ...instead of: */
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;

It has similar syntax to margin or padding, so you can also use it like this:

inset: 10px 20px;
/* ...instead of: */
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;

Source: MDN

user-select: all

Not crazy useful but it's a nice proof of concept. You can use a user-select: all trick to select, for example, a code snippet on click.

Source: Coder's Block (there's actually much more info about this property in general)

-webkit-fill-available

If you have ever tried to use vh units you probably know how "tricky" things get on mobile, especially webkit-based browsers. Below is a really nice trick to make things more predictable.

counter-*

I have no idea if this could be any useful but I thought it's interesting 😂.

gap

One of the best things about CSS grid is grid-gap. It's something I've been missing on flexbox but looks like it's coming: gap will be universal property that can work on both - grid AND flexbox. Browser support is pretty poor as of today but... Hey! It's coming!

• Source: MDN
• Browser support: Can I use...