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. You know what to make 😎

Also, thank you so much, my sponsors: Ben Rinehart, Jesse Willard, Tanya 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;
}

instead you can use that

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

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>

modal {
  display: none;
  padding: 1rem;
  /* remaining CSS */
}

.modal--is-open {
  display: block;
}

instead you can use that

<div class="modal" hidden>modal is hidden</div>
<div class="modal">modal is open</div>

.modal:not([hidden]) {
  padding: 1rem;
  /* remaining CSS */
}

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;
}

instead you can use that

.textarea {
  resize: vertical;
  min-height: 5rem;
  max-height: 15rem;
}