Skip to content

Interactions

Controlling how the user interacts with the page.

CSS Scroll Snap

Customize Data
CSS Scroll Snap is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a scroll container's scrollport may end at after a scrolling operation has completed.
Never heard of it
Know about it
Have used it
2019
2020
2021

overscroll-behavior

Customize Data
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y.
Never heard of it
Know about it
Have used it
2019
2020
2021
We asked members of the CSS community to share their “pick of the year”

My 2021 Pick: Container Queries

CSS container queries again! We got the chance to play with them in a browser. Thanks to Miriam Suzanne for moving this forward! I can't wait to use them without a flag.

We asked members of the CSS community to share their “pick of the year”

overflow-anchor

Customize Data
The overflow-anchor CSS property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.
Never heard of it
Know about it
Have used it
2019
2020
2021
💡

You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data.

touch-action

Customize Data
The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
Never heard of it
Know about it
Have used it
2020
2021

pointer-events

Customize Data
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
Never heard of it
Know about it
Have used it
2020
2021

scroll-timeline

Customize Data
Never heard of it
Know about it
Have used it
2021