DEV Community

Discussion on: 6 Powerful CSS Techniques You Can Use Instead of Javascript

Collapse
 
maxart2501 profile image
Massimo Artizzu

About scroll-behavior: I'm sure most of us are excited about it, but remember that it doesn't come without problems. Specifically:

  • users may be annoyed by long scrolling waiting time: use only for small jumps;
  • some other users perceive motion sickness when large areas move around. That's why there's also a prefers-reduced-motion media query to meet their needs.

In short, consider doing something like that:

@media screen and (prefers-reduced-motion: no-preference) {
  .scrolling-box {
    scroll-behavior: smooth;
  }
}

(Written like this, it's safe for those browsers that don't support prefers-reduced-motion.)

Collapse
 
dionarodrigues profile image
Diona Rodrigues

I'm with you Massimo, good tips. There are a lot of interesting CSS features, but we need to think about when and how to use them correctly. 🤩