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! π