CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 13-2026
article
Sneaky Header Blocker Trick
TAG: LAYOUT
Josh W. Comeau reveals a pure-CSS technique for giving a sticky site header the appearance of different background colors across page sections — no JavaScript required. The trick uses two hidden "blocker" elements with position: sticky, each color-matched to its own section (blue for the hero, white for the article body). Because a sticky element detaches when it leaves its container, the blue blocker scrolls away just as the white blocker beneath the content takes over, producing a seamless hand-off effect. The site header itself keeps a transparent background throughout. One key design tradeoff: each section needs at least as much empty space at the top as the header is tall (5rem on Comeau's blog) so the blocker has somewhere to sit when the user is at the page top.
Under the Hood: CSS Architecture Behind the Redesign
TAG: ARCHITECTURE
Brecht De Ruyte opens up the CSS architecture of his Astro-powered personal site, built with no preprocessor and minimal PostCSS (only postcss-custom-media and autoprefixer). The foundation is a single @layer declaration — vendor, tokens, reset, atoms, molecules, organisms, pages, utilities — that fixes cascade priority regardless of import order. A three-tier custom property system separates raw primitives (--p-), semantic tokens (--s-), and component overrides (--c-), with light-dark() used inline on all color tokens to replace a legacy 193-line dark.css. The CSS reset wraps every rule in :where() for zero specificity, includes interpolate-size: allow-keywords on html, and places the prefers-reduced-motion block outside any layer so it automatically beats layered animations without !important. Container queries replace media queries at the component level, and logical properties are applied throughout.
Rachel Andrew's monthly roundup covers stable and beta browser releases for March 2026 — Chrome 146, Firefox 149, and Safari 26.4. Highlights include: optional @container conditions (name-only queries) landing in Firefox 149 and Safari 26.4; scroll-driven animations arriving in Chrome 146 with the new trigger-scope property to namespace animation trigger names; the popover hint value shipping in Firefox 149; Safari 26.4 adding display: grid-lanes and math functions (min(), max(), clamp()) in the img sizes attribute; and the CloseWatcher interface in Firefox 149. In beta, Chrome 147 adds contrast-color(), border-shape, and scoped element view transitions, while Firefox 150 beta adds the revert-rule keyword and extends light-dark() to images.
A History of Styling Choices Leading to Native CSS
TAG: CSS EVOLUTION
Cassidy Williams traces the styling evolution of her open-source app todometer over nearly a decade. It started with Less for variables and nesting in an Electron/React codebase, moved to CSS Modules with node-sass in 2020 for encapsulation, then dropped Sass entirely in 2023 for plain CSS files plus postcss-nested (Sass-compatible syntax). The final step documented here was switching postcss-nested for postcss-nesting (CSS-spec syntax, requiring only adding & selectors), then deleting PostCSS configuration entirely — since native CSS nesting is now baseline. The migration diff was remarkably small, illustrating that a decade of preprocessor reliance ultimately converged on the same variables-and-nesting primitives now built into the browser.
This week's CSS Weekly roundup from Zoran Jambor covers the newly landed corner-shape property enabling beveled, scooped, and squircle corners beyond what border-radius can do. Also featured: the upcoming customizable select element, Una Kravets on contrast-color() for automatic accessible text colors, Bramus Van Damme on light-dark() being extended to support images, Kitty Giraudel's walkthrough of a CSS-only folding corner effect, Temani Afif on an unexpected anchor positioning use case, and Godstime Aburu's solutions for dropdown behavior in scrollable panels.
What Building a Polyfill Is Teaching Me About Web Standards
TAG: WEB STANDARDS
Schalk Neethling documents a conformance-driven development experiment: implementing two CSS features from the Interop 2026 list as JavaScript polyfills, guided by Web Platform Tests. The first candidate, the advanced attr() function from CSS Values Level 5, surfaced problems with custom property inheritance and @property, compound declarations blocking var() substitution, and ambiguous CSS.supports() detection. The second, CSS media pseudo-classes (:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked), appeared simpler but revealed that media events do not bubble (requiring per-element listeners via WeakMap), that the stalled state has no DOM surface (requiring polyfill-tracked flags), that :muted matches only the muted IDL attribute rather than volume === 0, and that rules extracted from @layer blocks must stay inside their original layer context. The :volume-locked pseudo-class is flagged as unpolyfillable due to OS-level restrictions.
Kevin Powell demonstrates a clever fix for gradient progress bars that look distorted at small sizes. When a progress bar uses a linear-gradient, the gradient fills only the element's current width, causing it to appear squished as the bar shrinks. The solution: apply container-type: inline-size to the progress element itself, making it a container even though it has no children that use container queries. Then set background-size: 100cqi on the gradient — 100% of the container's inline size — so the gradient always represents the full range regardless of the bar's current fill width. The technique also applies to -webkit-progress-value and -moz-progress-bar pseudo-elements to cover cross-browser progress styling.
Josh W. Comeau reveals a pure-CSS technique for giving a sticky site header the appearance of different background colors across page sections — no JavaScript required. The trick uses two hidden "blocker" elements with position: sticky, each color-matched to its own section (blue for the hero, white for the article body). Because a sticky element detaches when it leaves its container, the blue blocker scrolls away just as the white blocker beneath the content takes over, producing a seamless hand-off effect. The site header itself keeps a transparent background throughout. One key design tradeoff: each section needs at least as much empty space at the top as the header is tall (5rem on Comeau's blog) so the blocker has somewhere to sit when the user is at the page top.
Kevin Powell demonstrates a clever fix for gradient progress bars that look distorted at small sizes. When a progress bar uses a linear-gradient, the gradient fills only the element's current width, causing it to appear squished as the bar shrinks. The solution: apply container-type: inline-size to the progress element itself, making it a container even though it has no children that use container queries. Then set background-size: 100cqi on the gradient — 100% of the container's inline size — so the gradient always represents the full range regardless of the bar's current fill width. The technique also applies to -webkit-progress-value and -moz-progress-bar pseudo-elements to cover cross-browser progress styling.
Under the Hood: CSS Architecture Behind the Redesign
Brecht De Ruyte opens up the CSS architecture of his Astro-powered personal site, built with no preprocessor and minimal PostCSS (only postcss-custom-media and autoprefixer). The foundation is a single @layer declaration — vendor, tokens, reset, atoms, molecules, organisms, pages, utilities — that fixes cascade priority regardless of import order. A three-tier custom property system separates raw primitives (--p-), semantic tokens (--s-), and component overrides (--c-), with light-dark() used inline on all color tokens to replace a legacy 193-line dark.css. The CSS reset wraps every rule in :where() for zero specificity, includes interpolate-size: allow-keywords on html, and places the prefers-reduced-motion block outside any layer so it automatically beats layered animations without !important. Container queries replace media queries at the component level, and logical properties are applied throughout.
Rachel Andrew's monthly roundup covers stable and beta browser releases for March 2026 — Chrome 146, Firefox 149, and Safari 26.4. Highlights include: optional @container conditions (name-only queries) landing in Firefox 149 and Safari 26.4; scroll-driven animations arriving in Chrome 146 with the new trigger-scope property to namespace animation trigger names; the popover hint value shipping in Firefox 149; Safari 26.4 adding display: grid-lanes and math functions (min(), max(), clamp()) in the img sizes attribute; and the CloseWatcher interface in Firefox 149. In beta, Chrome 147 adds contrast-color(), border-shape, and scoped element view transitions, while Firefox 150 beta adds the revert-rule keyword and extends light-dark() to images.
A History of Styling Choices Leading to Native CSS
Cassidy Williams traces the styling evolution of her open-source app todometer over nearly a decade. It started with Less for variables and nesting in an Electron/React codebase, moved to CSS Modules with node-sass in 2020 for encapsulation, then dropped Sass entirely in 2023 for plain CSS files plus postcss-nested (Sass-compatible syntax). The final step documented here was switching postcss-nested for postcss-nesting (CSS-spec syntax, requiring only adding & selectors), then deleting PostCSS configuration entirely — since native CSS nesting is now baseline. The migration diff was remarkably small, illustrating that a decade of preprocessor reliance ultimately converged on the same variables-and-nesting primitives now built into the browser.
This week's CSS Weekly roundup from Zoran Jambor covers the newly landed corner-shape property enabling beveled, scooped, and squircle corners beyond what border-radius can do. Also featured: the upcoming customizable select element, Una Kravets on contrast-color() for automatic accessible text colors, Bramus Van Damme on light-dark() being extended to support images, Kitty Giraudel's walkthrough of a CSS-only folding corner effect, Temani Afif on an unexpected anchor positioning use case, and Godstime Aburu's solutions for dropdown behavior in scrollable panels.
What Building a Polyfill Is Teaching Me About Web Standards
Schalk Neethling documents a conformance-driven development experiment: implementing two CSS features from the Interop 2026 list as JavaScript polyfills, guided by Web Platform Tests. The first candidate, the advanced attr() function from CSS Values Level 5, surfaced problems with custom property inheritance and @property, compound declarations blocking var() substitution, and ambiguous CSS.supports() detection. The second, CSS media pseudo-classes (:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked), appeared simpler but revealed that media events do not bubble (requiring per-element listeners via WeakMap), that the stalled state has no DOM surface (requiring polyfill-tracked flags), that :muted matches only the muted IDL attribute rather than volume === 0, and that rules extracted from @layer blocks must stay inside their original layer context. The :volume-locked pseudo-class is flagged as unpolyfillable due to OS-level restrictions.
March 2026 was a landmark month for CSS platform capability. Rachel Andrew's browser roundup confirmed scroll-driven animations and the new trigger-scope property landing in Chrome 146, optional @container name-only conditions in Firefox 149 and Safari 26.4, and display: grid-lanes plus math functions in img sizes in Safari 26.4. Looking ahead, Chrome 147 beta ships contrast-color(), border-shape, and scoped element view transitions, while Firefox 150 beta extends light-dark() to images. CSS Weekly Issue 638 also highlighted the newly landed corner-shape property enabling squircle and beveled corners beyond border-radius.
Practical architecture thinking was front and center this week. Brecht De Ruyte detailed a preprocessor-free CSS system using a strict eight-layer@layer cascade (vendor through utilities), a three-tier custom property naming scheme, and light-dark() replacing 193 lines of dark mode CSS. Cassidy Williams traced todometer's decade-long journey from Less through Sass, PostCSS, and finally to native CSS nesting — eliminating the PostCSS config entirely now that nesting is baseline. Both posts underscore how much of what preprocessors once provided is now built into the browser.
Two technique-focused pieces rounded out the week: Josh Comeau's pure-CSS sticky header color-swap trick using hidden position: sticky blocker elements, and Kevin Powell's clever use of container-type: inline-size on a progress element itself (with background-size: 100cqi) to fix gradient distortion at small fill widths. A polyfill deep-dive by Schalk Neethling exposed edge cases in implementing Interop 2026 features like advanced attr() and CSS media pseudo-classes, revealing that :volume-locked is unpolyfillable due to OS restrictions.
Key Takeaways
Chrome 146 ships scroll-driven animations with trigger-scope; Chrome 147 beta adds contrast-color() and border-shape — cascade layers and modern CSS architecture are now the production baseline.
The corner-shape property (squircle, beveled, scooped corners) and extended light-dark() image support are landing in browsers, reducing dependence on SVG hacks and JS-driven theming.
Native CSS nesting is now baseline: Cassidy Williams deleted her entire PostCSS config after migrating todometer from postcss-nested to postcss-nesting to native nesting.
