Some of the (slightly) lesser known CSS features

The features listed here are from The State of CSS 2019.

Scroll Snap

Scroll snap is just what the name says. It makes the user scrolling "snap" to certain points on the page.

More info here.

overscroll-behavior

Normally, when an element with a scrollbar is scrolled all the way down or up, then a parent element will begin to scroll as well. overscroll-behavior can prevent this by not allowing the parent element to scroll.

(The demo here is somewhat finnicky. You have to be scrolling on an area without text, and stop scrolling when you hit the bottom, then start again.)

More info here

will-change

will-change is a strange one. It is a way to tell browsers that a property of an element will change. The Mozilla documentation states that it should only be used when performance problems are seen, and not in anticipation of a performance issue.

This is probably a useless demo, but it shows that sometimes rapid changes could require a will-change tag.

@supports

@supports is a query that checks if a browser supports a certain feature.

@supports (display: grid) {
  /* code here that gives the grid display instructions */
}

@supports not (overscroll-behavior) {
  /* If it doesn't support overscroll-behavior */
}

More info here

Writing modes

This is simply used to change the direction of the text in an element. It's an alternative to rotation of a <p> tag.

More info here

Wrapping up

I hope you learned a new thing or two with some of the newer CSS features that are out there. If there were any I missed or that you want to add, put them in the comments!