- Web Developer
- Posts
- Modern CSS - One-Line Enhancements: Simplify Your Stylesheets
Modern CSS - One-Line Enhancements: Simplify Your Stylesheets
8 Advanced One-Line Enhancements to Simplify Your Development
In modern CSS, various effects that previously required complex setups and concepts can now be achieved with one-line enhancements. These modern CSS techniques are widely supported by browsers, and in this article, I'll introduce eight of them that you might not know about.
1. Scroll Chaining
When a scrollable element, such as a dialog in a browser, reaches the end of its scrollable content, the scroll interaction is passed on to the underlying page (i.e., the body
element). This is a default behavior known as scroll chaining.
Scroll chaining isn’t limited to dialogs; it can happen with any adjacent scrollable areas, like sidebars with navigation links or chat popups. In the past, we had various tricks to avoid this, but now, thanks to the overscroll-behavior
property, it can be easily controlled with a single line of code.
The default value, overscroll-behavior: auto
, allows the usual scroll overflow behavior. To isolate scrolling within a container, you can set overscroll-behavior: contain
.messages {
overflow-y: auto;
overscroll-behavior-y: contain;
}
Notice that we use overflow: auto
instead of overflow: scroll
, which only shows a scrollbar when necessary. Additionally, you can use overscroll-behavior: none
to prevent the bounce effect that occurs when you scroll beyond the page boundaries. For instance, to prevent Chrome on Android from refreshing the page when scrolling past the top, you can set this on the html
element:
html {
margin: 0;
overscroll-behavior: none;
}
2. Scrollbar Gutter
As mentioned above, when using overflow: auto
, a scrollbar is added when content becomes too long, which can cause layout shifts by taking up space. This can negatively impact text readability.
Reply