CSS-Tricks·20wPrevent a page from scrolling while a dialog is open
Chrome 144 introduces a fix for preventing page scrolling when modal dialogs are open by extending overscroll-behavior to work on non-scrollable containers. By setting overscroll-behavior: contain on both the dialog element and body, and making the dialog a scroll container with overflow: hidden, developers can now solve this long-standing issue without JavaScript workarounds that previously required fixing body positioning.
CSS-Tricks·18wMasonry Layout is Now grid-lanes
The CSS Working Group has officially decided on `display: grid-lanes` as the syntax for triggering masonry layout in CSS. After years of debate starting in 2017, the CSSWG resolved to reuse grid templating and placement properties for masonry. All major browsers (Chrome, Safari, Firefox) had already implemented experimental versions with different syntaxes but are now working on switching to `grid-lanes`. The feature is not yet available in stable browsers, but implementation work is underway across all major browser engines.
CSS-Tricks·20wHTML Web Components Proposal From 1998
Web components have roots dating back to a 1998 W3C proposal that introduced the concept of componentization for building applications using reusable building blocks. The proposal emphasized breaking down complex applications into manageable chunks without requiring deep understanding of internal implementation details. While often perceived as a recent feature, the idea of style encapsulation and component-based architecture has been evolving for nearly 30 years in web development history.
CSS-Tricks·19wWhat Else Could Container Queries… Query?
Container queries have evolved beyond simple size queries to include scroll-state queries, anchored container queries, and potentially many more types. The article explores current container query capabilities including detecting scrollability, sticky positioning, and anchor position fallbacks. It discusses future possibilities like querying any CSS property value, detecting element wrapping or ellipsing, counting child nodes, and determining flex/grid positions. The author predicts container queries will become increasingly versatile, potentially offering dozens of query types similar to how media queries have expanded.