DEV Community

6 Powerful CSS Techniques You Can Use Instead of Javascript

Diona Rodrigues on July 20, 2020

There are a lot of discussions about CSS vs. JavaScript and the battle is getting seriously once CSS is adding a bunch of amazing features and it's...

Read full post

Vesa Piittinen • Jul 20 '20 • Edited

How about an ancient feature that has worked since the IE6 days but has rarely been used? :D

Very useful for long breadcrumbs, and on desktop you rarely get the scroll as you do have the screen estate.

I haven't encountered this trick in the wild. Or if I have I have already forgotten about it :)

Diona Rodrigues • Jul 21 '20

Thank you for sharing this solution. It's really helpful!! ✌

Mladen Milosavljevic • Jul 21 '20

Most of the stuff i used but darkmode was new for me and a good tool for my arsenal. It was good read. Kudos

Diona Rodrigues • Jul 21 '20

Awesome! Using just CSS we are able to handle Dark mode easily! 👌

Mladen Milosavljevic • Jul 21 '20

Yes!

Massimo Artizzu • Jul 22 '20

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.)

Diona Rodrigues • Aug 8 '20

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. 🤩

Rob Kendal {{☕}} • Jul 21 '20

Great article, Diogo, I love little tips like this that get lost or that you never knew existed.

Diona Rodrigues • Jul 21 '20

Thank you Rob! 👍

bowiechang • Oct 12 '20

Lovely, but just wanna point out on

position: sticky

you cannot have a parent that has attr overflow hidden to be applied otherwise it doesn't work...

Mehdi Mousavi • Jul 21 '20

scroll-behavior: smooth; is not supported in Safari, so you have to use JS ;)

Diona Rodrigues • Jul 21 '20 • Edited

I agree with you that for some browsers JS is necessary depending on the feature 😢🤷‍♂️. But for most of modern browsers we no longer need JS anymore for a lot of new CSS features. 🎉

Massimo Artizzu • Jul 22 '20

... or let it gracefully degrade in Safari.
It's not something that would break the UI 😉

Diona Rodrigues • Jul 21 '20

I feel happy that this article was useful for you! There are a lot of solutions for handling Dark theme, but just using CSS you can do a lot of thing easily! ✨🎉😎

Andrey Sitnik • Aug 26 '20

postcss-dark-theme-class can make even a dark/light switcher with CSS-only dark theme (and 5 lines JS for switcher).

pris stratton • Aug 7 '20

Lovely stuff. CSS is amazing. I always feel like the less JS a page uses the quicker it’ll be to load and use, but I have no idea whether that has any basis in fact.