I learned about scrollbar-gutter recently
and I can’t believe it’s not the default.
(Maybe I should make a whole series of these for CSS.)
The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn’t needed.
I discovered this when I built a site with centered content. When navigating between pages, the content would shift a few pixels left/right. It took me a while to figure out that this was because some pages showed a scrollbar, and other pages didn’t.
A screen recording of the behavior
Observe the right side of this screen recording to see the scrollbar appear and disappear during navigation.
Setting scrollbar-gutter: stable fixes this behavior.
Not only is this something you have to specify,
but it wasn’t even available until recently;
MDN indicates this is in Baseline
as of December 2024.
What did poor designers do in the past, I don’t even want to know.