--- title: Best CSS-Tricks posts — December 2025 | daily.dev description: The most upvoted CSS-Tricks posts from December 2025, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2025/12 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2025/12 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — December 2025 | daily.dev og:description: The most upvoted CSS-Tricks posts from December 2025, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of CSS-Tricks — December 2025 1. 1 [](https://daily.dev/posts/prevent-a-page-from-scrolling-while-a-dialog-is-open-eu2mwohe5 "Prevent a page from scrolling while a dialog is open") Article CSS-Tricks · 40w Prevent 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. 150 5 2. 2 [](https://daily.dev/posts/masonry-layout-is-now-grid-lanes-oyfscxlvr "Masonry Layout is Now grid-lanes") Article CSS-Tricks · 38w Masonry 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. 102 3 3. 3 [](https://daily.dev/posts/html-web-components-proposal-from-1998-byxgmctnu "HTML Web Components Proposal From 1998") Article CSS-Tricks · 40w HTML 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. 81 4 4. 4 [](https://daily.dev/posts/what-else-could-container-queries-query--1ddjduvii "What Else Could Container Queries… Query?") Article CSS-Tricks · 39w What 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. 74 1 [See all CSS-Tricks archives](/sources/css%5Ftricks/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/css_tricks/best-of/2025/12#page","url":"https://daily.dev/sources/css_tricks/best-of/2025/12","name":"Best CSS-Tricks Posts — December 2025","description":"The most upvoted CSS-Tricks posts from December 2025, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css_tricks/best-of/2025/12#items","numberOfItems":4,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/prevent-a-page-from-scrolling-while-a-dialog-is-open-eu2mwohe5","name":"Prevent a page from scrolling while a dialog is open"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/masonry-layout-is-now-grid-lanes-oyfscxlvr","name":"Masonry Layout is Now grid-lanes"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/html-web-components-proposal-from-1998-byxgmctnu","name":"HTML Web Components Proposal From 1998"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/what-else-could-container-queries-query--1ddjduvii","name":"What Else Could Container Queries… Query?"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/css_tricks/best-of"},{"@type":"ListItem","position":5,"name":"December 2025"}]}]} ```