Hey folks!
CSS is magic for a lot of people. So I'm here to help. I wrote this article with my favorite tips. If you like it you'll read more tips in my newsletter.
border helps users with photosensitivity to find element boundaries
background doesn't display with operating system contrast settings enabled. As a result, users won't element boundaries. The solution is to use border: 1px solid transparent 💡
The power of CSS inheritance when defining line-height
Folks, I messed up. I forgot I can use CSS inheritance and add line-height to <body> instead of adding it to <p>, <h*>, <ul>, et al. separately 😉
Don't forget to stop page scrolling when creating a custom scrollbar
Do you make the widget with custom scrolling? overscroll-behavior will care about your users by stopping page scrolling after scrolling your widget 💡
We don't need to use 0 anymore to define margins and paddings
I had to make a not logical thing, i.e. use 0 to define margins, paddings with opposite sides 😒 Now margin-block, margin-inline, padding-block, padding-inline help us to make the same without 0 🥳
It’s time to use a new way for centering elements with position: absolute
Do you still use the old snippet to the center element with position: absolute using transform(-50%, -50%)? It’s time to use a new alternative! Meet place-items: center 😉
Top comments (3)
Useful tips to use it. Thanks @melnik909
Very Nice
These are great tips! 😉