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 😂.
CSS 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
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...
Top comments (0)