Today’s recommendations: CSS header blockers, subgrid in practice, inverted dark mode, container query scoping, and Vue 3.6 Vapor Mode

Josh Comeau's definitive guide to sticky header scroll problems, why CSS subgrid deserves wider adoption, Dave Rupert's inverted light-dark() trick, Frontend Masters on name-only containers for CSS scoping without layout side effects, and what Vue 3.6's Vapor Mode means for rendering performance.

CSS is having a genuinely good year and this batch proves it.

Josh Comeau’s Header Blockers is the kind of deep-dive only he produces. The problem: sticky headers create a dead zone at the top of the viewport where in-page anchor links land behind the header. The post walks through every solution, scroll-margin-top, scroll-padding-top, the interaction of both with position: sticky, and the edge cases that break each one. The interactive examples make the tradeoffs tangible in a way that text descriptions can’t. If you’ve ever had a user complain that clicking a table-of-contents link hides the target behind the navbar, this is the definitive reference. Bookmark it; you’ll need it.

David Bushell’s CSS Subgrid Is Super Good is an enthusiastic walkthrough of a feature that’s been in browsers for a while but still isn’t widely used in production. Subgrid lets a child element inherit its parent’s grid tracks, which means you can align items across sibling elements without hacky custom properties or JavaScript. The card layout example, where titles, descriptions, and buttons all align across a row regardless of content length, is the canonical use case, and David shows it working with clean CSS and before/after comparisons. If you’ve been avoiding subgrid because it felt too new, it isn’t anymore, and this post makes it click.

Dave Rupert’s Inverted Light/Dark is a short, clever CSS technique. The light-dark() function already handles color-scheme switching, but Rupert uses it inverted, swapping the arguments so a component renders as the opposite of the current page mode. The practical use: a dark footer on a light page, or a light callout on a dark page, without maintaining separate override classes. Same function, swapped values. Elegant and zero-JavaScript.

Frontend Masters’ Name-Only Containers covers a container query feature that solves a subtle but real problem. Using container-name without container-type lets you mark an element as a boundary for @container rules without altering its layout behavior. This matters for component libraries: you want container queries to work without forcing consumers into specific layout modes. The post explains the distinction clearly, with examples showing where unnamed containers break component composition and how name-only containers fix it.

Vue 3.6 Vapor Mode explains Vue’s new compilation strategy that bypasses the virtual DOM entirely. Instead of diffing a virtual tree on every reactive update, Vapor Mode compiles templates to direct DOM operations, the same approach Svelte and Solid use. The result is smaller bundles and faster updates, especially for components with frequent state changes. The post covers what Vapor Mode changes at the compiler level, how to opt in per-component, and which patterns benefit most. If you’re on Vue and haven’t tracked this, it’s the biggest architectural change to the framework in years.