This post is just a collection of some CSS tricks and magic I've learned about over the last couple months.
When you have tiles-type background and you don't a tile to be cut-off.
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.
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.
Nifty shorthand for two properties.
place-items: center; /* ...instead of: */ align-items: center; justify-items: center;
inset: 10px 20px 30px 40px; /* ...instead of: */ top: 10px; right: 20px; bottom: 30px; left: 40px;
It has similar syntax to
padding, so you can also use it like this:
inset: 10px 20px; /* ...instead of: */ top: 10px; right: 20px; bottom: 10px; left: 20px;
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)
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.
I have no idea if this could be any useful but I thought it's interesting 😂.
Minko GechevCSS allows you to define numeric counters 🤯
🔸 counter-reset - reset the counter and set initial value
🔸 counter-increment - increase/decrease the counter with specific value
🔸 counter(name) - get and format the counter value06:30 AM - 07 May 2020
One of the best things about CSS
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 -
flexbox. Browser support is pretty poor as of today but... Hey! It's coming!