CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 14-2026
article
CSS position: sticky Now Sticks to the Nearest Scroller on a Per-Axis Basis
TAG: LAYOUT
A long-standing CSS limitation is finally resolved: position: sticky can now track two different scroll containers simultaneously, one per axis. Previously, wrapping a wide data table in an overflow-x: auto container forced both the sticky header (top: 0) and the sticky first column (left: 0) to share the same scroll reference, making vertical stickiness ineffective. The fix relies on a change to the overflow specification allowing containers to be scrollers on a single axis only. The critical detail is using overflow: auto clip on the wrapper — using overflow-x: auto alone causes overflow-y to compute to auto, recreating the trap. Feature detection via @supports named-feature(single-axis-scroll-container) lands in Chrome 150. Currently available in Chrome 148 behind the Experimental Web Platform Features flag; Firefox and Safari have no support yet.
Three modern CSS features now eliminate the need for JavaScript-based show/hide animations. @starting-style defines the pre-render state an element transitions from on entry, solving the long-standing inability to animate elements appearing in the DOM. transition-behavior: allow-discrete lets discrete properties like display participate in transitions, holding display: none until the exit animation completes. interpolate-size: allow-keywords enables transitions to and from keyword sizes like height: auto by resolving them to pixel values at animation time. Browser support table: @starting-style and transition-behavior landed in Chrome 117, Firefox 129, and Safari 17.5; interpolate-size is available in Chrome 129 and Safari 18 but is still missing in Firefox. Combined, they replace the common JS class-toggle plus setTimeout pattern and eliminate the need for libraries like GSAP or Framer Motion for basic show/hide patterns.
Harry Roberts provides a thorough practical guide to the underused contain property and its four values — layout, paint, size, and style — explaining the rendering-pipeline reasoning behind each. contain: layout makes a component's internal layout independent, establishes a formatting context, and scopes position: fixed children to the contained element rather than the viewport. contain: paint clips rendering to the padding box and lets the browser skip off-screen subtrees entirely. The shorthands content (layout + paint + style) and strict (all four) suit most card and widget patterns, but strict requires explicit sizing via contain-intrinsic-size. A real OpenTable case study shows applying contain: strict to a mobile drawer reducing a layout event from 4,371 touched nodes to 73 and speeding it up roughly six times. content-visibility: auto with contain-intrinsic-size provides virtualisation-like performance gains for long off-screen lists without JavaScript.
Introducing view-transitions-toolkit: Utility Functions for the View Transitions API
TAG: TOOLING
Bramus Van Damme has published view-transitions-toolkit, an npm package distilling common advanced patterns from his years of View Transitions work into reusable helper functions. The toolkit covers feature detection for View Transitions sub-features, shimming document.activeViewTransition, utilities for extracting and optimizing keyframe animations (including SCALE and SLIDE optimization strategies), transition playback controls for pausing and scrubbing, and automatic injection of View Transition types based on navigation origin and destination. Installation is via npm i view-transitions-toolkit; individual modules are imported as needed. A companion demo site at chrome.dev/view-transitions-toolkit/ showcases the helpers in action. The project targets developers who need advanced View Transitions patterns without repeatedly reimplementing the same boilerplate.
Aligning Variable Content Across Columns: CSS Subgrid to the Rescue
TAG: GRID
Aligning dividers across sibling cards with variable-length headings is a classic layout problem that feels impossible until you apply CSS subgrid. The solution uses grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) on the parent, then each card spans three parent row tracks with grid-row: span 3 and opts into the parent's row sizing with grid-template-rows: subgrid. Because subgrid inherits parent gap values, overriding row-gap: 0 on the card keeps internal spacing tight. Track sharing is limited to cards on the same visual row, so responsive wrapping works correctly without JavaScript or @media query adjustments. The :has() pseudo-class handles variant cards with or without an icon element, keeping logic declarative. Subgrid reached Baseline Widely Available status in March 2026, supported in Chrome 117+, Firefox 71+, Safari 16+, and Edge 117+.
CSS @property Deserves Better Tooling — So I Am Building a Validator
TAG: TOOLING
The CSS @property at-rule lets authors declare typed contracts for custom properties — specifying syntax as color, length, time, image, and so on — but no tooling validates those types at the consumption site. Misusing a registered property (e.g., background-image: var(--brand-color) when --brand-color is a color) fails silently at computed-value time, a behavior the spec calls IACVT. CSS Property Type Validator is a standalone TypeScript library and CLI (available as two scoped npm packages: a core validation engine and a CLI wrapper) that parses stylesheets, builds a @property registry, walks var() usage sites, generates representative sample values for each registered syntax type, and uses css-tree's lexer to check compatibility. Exit codes follow convention (0/1/2), JSON output supports CI integration. Current limitations include single var() per declaration only; Stylelint plugin and editor integration are planned for future iterations.
Kevin Powell diagnoses a common CSS pitfall — writing overly prescriptive styles — through a live card-layout example where fixed height and fixed width declarations cause overflow and grid breakage when components are placed into a real layout. The core mindset shift: work with the browser instead of against it, because the browser already knows what to do with sizing. Concrete rules covered: avoid setting explicit height (elements want to be as tall as they need to be); prefer max-width over width to avoid overflow without restricting shrinkage; separate layout concerns from component concerns so margin and width on a component do not bleed into the surrounding grid. The video accompanies the relaunch of his CSS Demystified v2 course, which builds on this philosophy of resilient, browser-cooperative CSS over property memorization.
CSS position: sticky Now Sticks to the Nearest Scroller on a Per-Axis Basis
A long-standing CSS limitation is finally resolved: position: sticky can now track two different scroll containers simultaneously, one per axis. Previously, wrapping a wide data table in an overflow-x: auto container forced both the sticky header (top: 0) and the sticky first column (left: 0) to share the same scroll reference, making vertical stickiness ineffective. The fix relies on a change to the overflow specification allowing containers to be scrollers on a single axis only. The critical detail is using overflow: auto clip on the wrapper — using overflow-x: auto alone causes overflow-y to compute to auto, recreating the trap. Feature detection via @supports named-feature(single-axis-scroll-container) lands in Chrome 150. Currently available in Chrome 148 behind the Experimental Web Platform Features flag; Firefox and Safari have no support yet.
Kevin Powell diagnoses a common CSS pitfall — writing overly prescriptive styles — through a live card-layout example where fixed height and fixed width declarations cause overflow and grid breakage when components are placed into a real layout. The core mindset shift: work with the browser instead of against it, because the browser already knows what to do with sizing. Concrete rules covered: avoid setting explicit height (elements want to be as tall as they need to be); prefer max-width over width to avoid overflow without restricting shrinkage; separate layout concerns from component concerns so margin and width on a component do not bleed into the surrounding grid. The video accompanies the relaunch of his CSS Demystified v2 course, which builds on this philosophy of resilient, browser-cooperative CSS over property memorization.
Three modern CSS features now eliminate the need for JavaScript-based show/hide animations. @starting-style defines the pre-render state an element transitions from on entry, solving the long-standing inability to animate elements appearing in the DOM. transition-behavior: allow-discrete lets discrete properties like display participate in transitions, holding display: none until the exit animation completes. interpolate-size: allow-keywords enables transitions to and from keyword sizes like height: auto by resolving them to pixel values at animation time. Browser support table: @starting-style and transition-behavior landed in Chrome 117, Firefox 129, and Safari 17.5; interpolate-size is available in Chrome 129 and Safari 18 but is still missing in Firefox. Combined, they replace the common JS class-toggle plus setTimeout pattern and eliminate the need for libraries like GSAP or Framer Motion for basic show/hide patterns.
Harry Roberts provides a thorough practical guide to the underused contain property and its four values — layout, paint, size, and style — explaining the rendering-pipeline reasoning behind each. contain: layout makes a component's internal layout independent, establishes a formatting context, and scopes position: fixed children to the contained element rather than the viewport. contain: paint clips rendering to the padding box and lets the browser skip off-screen subtrees entirely. The shorthands content (layout + paint + style) and strict (all four) suit most card and widget patterns, but strict requires explicit sizing via contain-intrinsic-size. A real OpenTable case study shows applying contain: strict to a mobile drawer reducing a layout event from 4,371 touched nodes to 73 and speeding it up roughly six times. content-visibility: auto with contain-intrinsic-size provides virtualisation-like performance gains for long off-screen lists without JavaScript.
Introducing view-transitions-toolkit: Utility Functions for the View Transitions API
Bramus Van Damme has published view-transitions-toolkit, an npm package distilling common advanced patterns from his years of View Transitions work into reusable helper functions. The toolkit covers feature detection for View Transitions sub-features, shimming document.activeViewTransition, utilities for extracting and optimizing keyframe animations (including SCALE and SLIDE optimization strategies), transition playback controls for pausing and scrubbing, and automatic injection of View Transition types based on navigation origin and destination. Installation is via npm i view-transitions-toolkit; individual modules are imported as needed. A companion demo site at chrome.dev/view-transitions-toolkit/ showcases the helpers in action. The project targets developers who need advanced View Transitions patterns without repeatedly reimplementing the same boilerplate.
Aligning Variable Content Across Columns: CSS Subgrid to the Rescue
Aligning dividers across sibling cards with variable-length headings is a classic layout problem that feels impossible until you apply CSS subgrid. The solution uses grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) on the parent, then each card spans three parent row tracks with grid-row: span 3 and opts into the parent's row sizing with grid-template-rows: subgrid. Because subgrid inherits parent gap values, overriding row-gap: 0 on the card keeps internal spacing tight. Track sharing is limited to cards on the same visual row, so responsive wrapping works correctly without JavaScript or @media query adjustments. The :has() pseudo-class handles variant cards with or without an icon element, keeping logic declarative. Subgrid reached Baseline Widely Available status in March 2026, supported in Chrome 117+, Firefox 71+, Safari 16+, and Edge 117+.
CSS @property Deserves Better Tooling — So I Am Building a Validator
The CSS @property at-rule lets authors declare typed contracts for custom properties — specifying syntax as color, length, time, image, and so on — but no tooling validates those types at the consumption site. Misusing a registered property (e.g., background-image: var(--brand-color) when --brand-color is a color) fails silently at computed-value time, a behavior the spec calls IACVT. CSS Property Type Validator is a standalone TypeScript library and CLI (available as two scoped npm packages: a core validation engine and a CLI wrapper) that parses stylesheets, builds a @property registry, walks var() usage sites, generates representative sample values for each registered syntax type, and uses css-tree's lexer to check compatibility. Exit codes follow convention (0/1/2), JSON output supports CI integration. Current limitations include single var() per declaration only; Stylelint plugin and editor integration are planned for future iterations.
Week 14 brought a wave of CSS capability upgrades that reduce reliance on JavaScript. The most practically impactful is the per-axis position: sticky fix in Chrome 148: by using overflow: auto clip on a wrapper element, sticky headers and sticky first columns in a data table can now track different scroll containers simultaneously — a fix detectable via @supports named-feature(single-axis-scroll-container) landing in Chrome 150. Alongside this, three CSS features now combine to eliminate JS-based show/hide animation entirely: @starting-style for entry transitions, transition-behavior: allow-discrete for discrete properties like display, and interpolate-size: allow-keywords for animating height: auto.
Harry Roberts published a deep dive into CSS containment, showing how contain: strict applied to a mobile drawer reduced a layout event from touching 4,371 nodes down to 73 — roughly a 6x speedup. Combined with content-visibility: auto and contain-intrinsic-size, containment provides virtualization-like performance without JavaScript. On the grid front, CSS subgrid hit Baseline Widely Available in March 2026, and a practical guide demonstrated how grid-template-rows: subgrid with grid-row: span 3 aligns variable-height card content across columns without any JavaScript.
Two tooling items also stood out: Bramus Van Damme released view-transitions-toolkit on npm, packaging advanced View Transitions API helpers for feature detection, keyframe optimization, and transition playback control. And a new TypeScript-based CSS Property Type Validator CLI catches silent IACVT failures where typed @property custom properties are consumed with the wrong value type.
Key Takeaways
Chrome 148 fixes per-axis position: sticky — use overflow: auto clip on the wrapper (not just overflow-x: auto) to let headers and first columns stick to different scroll containers simultaneously.
@starting-style, transition-behavior: allow-discrete, and interpolate-size: allow-keywords together replace JS class-toggle animations for entry, exit, and height: auto transitions across modern browsers.
contain: strict cut a real OpenTable mobile drawer layout from 4,371 touched nodes to 73 — apply CSS containment to isolated card and widget components for measurable rendering gains.
