DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Stas Melnikov
Stas Melnikov

Posted on • Updated on

The 3 Short September CSS tips

Hey folks!

I'd like to talk about how to use the scroll-behavior property safe for users, to reduce CSS with the hidden attribute and to create alternative for resize: none.

But before embarking on reading I leave the link on my Substack newsletter about CSS. If you wanna read more tips you know what to make 😎

Also, thank you so much, my sponsors: Ben Rinehart, Jesse Willard, Tatiana Ten, Konstantinos Kapenekakis. I didn't write this article without their support.

The scroll-behavior property without the prefers-reduced-motion media feature can lead to dizziness or headache

The scroll-behavior property can lead to dizziness or headache when smooth scrolling😩 But if you use it with the prefers-reduced-motion media feature smooth scrolling will display only if users allow it in OS settingsπŸ’‘

don't make that

html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

instead you can use that

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
Enter fullscreen mode Exit fullscreen mode

The hidden attribute removes the need to define display: none

When using the hidden attribute browsers add display: none behind the scenes. It can used when adding display: none/display: block to elements that to be hidden or shown like popups, modal, etc. Just define all CSS with :not([hidden])πŸ’‘

don't make that

<div class="modal">modal is hidden</div>
<div class="modal modal--is-open">modal is open</div>
Enter fullscreen mode Exit fullscreen mode
modal {
  display: none;
  padding: 1rem;
  /* remaining CSS */
}

.modal--is-open {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

instead you can use that

<div class="modal" hidden>modal is hidden</div>
<div class="modal">modal is open</div>
Enter fullscreen mode Exit fullscreen mode
.modal:not([hidden]) {
  padding: 1rem;
  /* remaining CSS */
}
Enter fullscreen mode Exit fullscreen mode

Please, stop using resize: none

We used to use resize: none to disable textarea resizing. We end up typing data with a lot of discomfortπŸ˜’ But we can use resize: vertical and limit height resizing to avoid unlimited expansion when touching the display with your fingerπŸ’‘

don't make that

.textarea {
  resize: none;
}
Enter fullscreen mode Exit fullscreen mode

instead you can use that

.textarea {
  resize: vertical;
  min-height: 5rem;
  max-height: 15rem;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

What image format should you use in your next project? πŸ€”