CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 16-2026
article
Squash and Stretch: Disney's First Animation Principle Applied to the Web
TAG: ANIMATION
Josh W. Comeau demonstrates how Disney's squash-and-stretch animation principle applies directly to SVG micro-interactions on the web. The tutorial centers on animating arrow icons using the CSS path() function and the d property transition, with a frank note that Safari lacks support for CSS transitions on SVG path elements as of April 2026, leaving browser coverage at roughly 79%. As a robust cross-browser alternative, Comeau reaches for the Motion library, which leverages the Web Animations API to keep animations on a separate thread. He then layers in spring physics (stiffness: 300, damping: 12) for a rubber-band feel and replaces the standard state-based hover model with an event-based trigger — the stretch fires briefly on pointerenter and snaps back after 150 ms — producing an unusually playful result. The post includes a bouncing-ball playground that pairs separate bounce and squash keyframes, using transform-origin: center bottom and CSS custom properties to control stretch and squash ratios.
Jeremy Wagner's March 2026 Baseline digest reports a significant wave of new interoperability milestones. Newly available features include the math value for font-family for MathML rendering, the text-indent: each-line and text-indent: hanging keywords for fine-grained typographic control, and WebTransport built on HTTP/3 for low-latency bidirectional communication. On the Widely available front — features safe for production without polyfills after 30 months of interoperability — notable CSS additions include contain-intrinsic-size for preventing layout shifts during lazy load, @counter-style for custom list markers, the hyphens and hyphenate-character properties, image-set() for resolution-aware CSS images, overflow media queries (overflow-block and overflow-inline), the update media feature for detecting display refresh rates, and CSS subgrid. The digest also highlights Rachel Andrew's Web Day Out talk on choosing pragmatic Baseline targets aligned with a project's launch date.
A React Modal Using the dialog Element with CSS Transitions In and Out
TAG: UI COMPONENTS
Ben Frain walks through the non-trivial challenge of building a React modal on the native dialog element that transitions both in and out, including its ::backdrop. The entry transition relies on @starting-style to declare the pre-insertion visual state (transform: scale(0.8); opacity: 0) so CSS can interpolate from it. The exit transition requires transitioning the display and overlay properties, which demands allow-discrete on the transition declaration — otherwise those properties snap instead of animating. Frain exposes a Safari-specific bug where dismissing a dialog resets its inset values, causing the element to jump; the fix is an explicit inset: 0; position: fixed rule. Backdrop click-to-dismiss uses a closedby="any" attribute in Chromium browsers, but needs a fallback wrapping div strategy for Safari. Styling is exposed as CSS custom properties (--padding, --radii, --transitionSpeed) applied directly on the dialog element.
GSAP 3.15: Introducing Adaptive Directional Easing with easeReverse
TAG: ANIMATION
GSAP 3.15 ships easeReverse, a new tween-level property that solves the longstanding problem of reversed animations feeling wrong because reversing the playhead also reverses the easing curve. Setting easeReverse: true reuses the forward ease adapted for reverse direction; passing any ease string (e.g., "sine.in") applies an entirely different feel on exit. GSAP recalculates the curve from the exact position where the playhead changed direction, so interruptions mid-tween are handled correctly. The property cascades through timeline defaults to nested tweens, making it practical for toggleable UI patterns like modals, drawers, and menus. As a consequence, yoyoEase is deprecated: GSAP 3.15 internally maps yoyoEase to easeReverse for full backwards compatibility.
CSS Breakpoint Units: Design in Pixels, Get Fluid Accessibility for Free
TAG: RESPONSIVE
The @propjockey/breakpoint-system npm package uses the tan(atan2()) CSS technique to convert length values such as 100cqw into unitless numbers, enabling pixel-based breakpoints that automatically adapt to user font-size preferences without requiring rem or em in media queries. Up to ten named breakpoints (sm, md, lg, etc.) are registered as CSS custom properties producing integer bit flags (0 or 1) via abs(), clamp(), min(), max(), and calc(). Those flags unlock three authoring paths: calc() switches, @container style() queries, and the CSS if(style()) function. Two accessibility problems are solved automatically: because 100cqw excludes scrollbar width (unlike media queries), oversized system scrollbars no longer trigger the wrong breakpoint layout; and user-adjusted system font sizes scale breakpoint thresholds proportionally using the tan(atan2(1rem)) scalar, replicating the em-breakpoint effect without author effort. Library browser reach is reported at 91% as of April 2026.
Introducing masonry-gridlanes-wc: A Native-First Masonry Web Component
TAG: LAYOUT
masonry-gridlanes-wc (v0.1.0) is a light-DOM custom element that brings masonry layouts to production today while staying aligned with CSS Grid Level 3's forthcoming display: grid-lanes spec. When a browser natively supports grid-lanes, the component steps aside entirely; otherwise, a JavaScript fallback using the same mental model — min-column-width, gap, and item spanning — handles placement. The element is registered as masonry-grid-lanes and configured through HTML attributes, making column calculation and gap spacing declarative. For text-heavy cards, an optional text-metrics="pretext" attribute integrates the Pretext library to compute heights from text metrics alone, bypassing expensive DOM measurement and forced reflows on resize. Experimental row mode (mode="rows") enables horizontal packing. The author is transparent about fallback limitations: named grid lines, full CSS unit resolution, and certain intrinsic sizing behaviors differ from what a native browser engine will eventually produce.
Kevin Powell demonstrates CSS container queries as an intrinsic wrap-detection mechanism, removing the need for JavaScript resize observers. The core technique assigns container-type: inline-size to a flex child (the "wrap detector"), then queries whether that child's width exceeds 75vw — when it has not wrapped it occupies only a fraction of the viewport, but after wrapping it expands to full width, crossing the threshold. Powell extends this to multi-column grid contexts by nesting a second container layer, replacing the vw unit with cqw (container query width) so the query is evaluated relative to the parent container rather than the viewport. He acknowledges limitations: elements with no explicit size will collapse in a flex-wrap setup, and the technique requires explicit sizing to be reliable. The approach is presented as complementary to media queries, not a replacement, and is drawn from an Andy Bell Piccalilli article.
Squash and Stretch: Disney's First Animation Principle Applied to the Web
Josh W. Comeau demonstrates how Disney's squash-and-stretch animation principle applies directly to SVG micro-interactions on the web. The tutorial centers on animating arrow icons using the CSS path() function and the d property transition, with a frank note that Safari lacks support for CSS transitions on SVG path elements as of April 2026, leaving browser coverage at roughly 79%. As a robust cross-browser alternative, Comeau reaches for the Motion library, which leverages the Web Animations API to keep animations on a separate thread. He then layers in spring physics (stiffness: 300, damping: 12) for a rubber-band feel and replaces the standard state-based hover model with an event-based trigger — the stretch fires briefly on pointerenter and snaps back after 150 ms — producing an unusually playful result. The post includes a bouncing-ball playground that pairs separate bounce and squash keyframes, using transform-origin: center bottom and CSS custom properties to control stretch and squash ratios.
Kevin Powell demonstrates CSS container queries as an intrinsic wrap-detection mechanism, removing the need for JavaScript resize observers. The core technique assigns container-type: inline-size to a flex child (the "wrap detector"), then queries whether that child's width exceeds 75vw — when it has not wrapped it occupies only a fraction of the viewport, but after wrapping it expands to full width, crossing the threshold. Powell extends this to multi-column grid contexts by nesting a second container layer, replacing the vw unit with cqw (container query width) so the query is evaluated relative to the parent container rather than the viewport. He acknowledges limitations: elements with no explicit size will collapse in a flex-wrap setup, and the technique requires explicit sizing to be reliable. The approach is presented as complementary to media queries, not a replacement, and is drawn from an Andy Bell Piccalilli article.
Jeremy Wagner's March 2026 Baseline digest reports a significant wave of new interoperability milestones. Newly available features include the math value for font-family for MathML rendering, the text-indent: each-line and text-indent: hanging keywords for fine-grained typographic control, and WebTransport built on HTTP/3 for low-latency bidirectional communication. On the Widely available front — features safe for production without polyfills after 30 months of interoperability — notable CSS additions include contain-intrinsic-size for preventing layout shifts during lazy load, @counter-style for custom list markers, the hyphens and hyphenate-character properties, image-set() for resolution-aware CSS images, overflow media queries (overflow-block and overflow-inline), the update media feature for detecting display refresh rates, and CSS subgrid. The digest also highlights Rachel Andrew's Web Day Out talk on choosing pragmatic Baseline targets aligned with a project's launch date.
A React Modal Using the dialog Element with CSS Transitions In and Out
Ben Frain walks through the non-trivial challenge of building a React modal on the native dialog element that transitions both in and out, including its ::backdrop. The entry transition relies on @starting-style to declare the pre-insertion visual state (transform: scale(0.8); opacity: 0) so CSS can interpolate from it. The exit transition requires transitioning the display and overlay properties, which demands allow-discrete on the transition declaration — otherwise those properties snap instead of animating. Frain exposes a Safari-specific bug where dismissing a dialog resets its inset values, causing the element to jump; the fix is an explicit inset: 0; position: fixed rule. Backdrop click-to-dismiss uses a closedby="any" attribute in Chromium browsers, but needs a fallback wrapping div strategy for Safari. Styling is exposed as CSS custom properties (--padding, --radii, --transitionSpeed) applied directly on the dialog element.
GSAP 3.15: Introducing Adaptive Directional Easing with easeReverse
GSAP 3.15 ships easeReverse, a new tween-level property that solves the longstanding problem of reversed animations feeling wrong because reversing the playhead also reverses the easing curve. Setting easeReverse: true reuses the forward ease adapted for reverse direction; passing any ease string (e.g., "sine.in") applies an entirely different feel on exit. GSAP recalculates the curve from the exact position where the playhead changed direction, so interruptions mid-tween are handled correctly. The property cascades through timeline defaults to nested tweens, making it practical for toggleable UI patterns like modals, drawers, and menus. As a consequence, yoyoEase is deprecated: GSAP 3.15 internally maps yoyoEase to easeReverse for full backwards compatibility.
CSS Breakpoint Units: Design in Pixels, Get Fluid Accessibility for Free
The @propjockey/breakpoint-system npm package uses the tan(atan2()) CSS technique to convert length values such as 100cqw into unitless numbers, enabling pixel-based breakpoints that automatically adapt to user font-size preferences without requiring rem or em in media queries. Up to ten named breakpoints (sm, md, lg, etc.) are registered as CSS custom properties producing integer bit flags (0 or 1) via abs(), clamp(), min(), max(), and calc(). Those flags unlock three authoring paths: calc() switches, @container style() queries, and the CSS if(style()) function. Two accessibility problems are solved automatically: because 100cqw excludes scrollbar width (unlike media queries), oversized system scrollbars no longer trigger the wrong breakpoint layout; and user-adjusted system font sizes scale breakpoint thresholds proportionally using the tan(atan2(1rem)) scalar, replicating the em-breakpoint effect without author effort. Library browser reach is reported at 91% as of April 2026.
Introducing masonry-gridlanes-wc: A Native-First Masonry Web Component
masonry-gridlanes-wc (v0.1.0) is a light-DOM custom element that brings masonry layouts to production today while staying aligned with CSS Grid Level 3's forthcoming display: grid-lanes spec. When a browser natively supports grid-lanes, the component steps aside entirely; otherwise, a JavaScript fallback using the same mental model — min-column-width, gap, and item spanning — handles placement. The element is registered as masonry-grid-lanes and configured through HTML attributes, making column calculation and gap spacing declarative. For text-heavy cards, an optional text-metrics="pretext" attribute integrates the Pretext library to compute heights from text metrics alone, bypassing expensive DOM measurement and forced reflows on resize. Experimental row mode (mode="rows") enables horizontal packing. The author is transparent about fallback limitations: named grid lines, full CSS unit resolution, and certain intrinsic sizing behaviors differ from what a native browser engine will eventually produce.
This week's styling coverage spans animations, layouts, and cross-browser compatibility. Josh W. Comeau demonstrated Disney's squash-and-stretch principle applied to SVG path animations using CSS path() and the Motion library's Web Animations API integration, noting Safari's lack of support for CSS transitions on SVG path elements as of April 2026 (roughly 79% browser coverage). GSAP 3.15 introduced easeReverse, a tween-level property that correctly adapts an easing curve for reverse playback direction and replaces the now-deprecated yoyoEase.
On the layout front, Kevin Powell showed how CSS container queries can detect flex-wrap purely in CSS using container-type: inline-size, while the masonry-gridlanes-wcv0.1.0 custom element brings masonry layouts to production today as a progressive-enhancement wrapper for the forthcoming CSS Grid Level 3display: grid-lanes spec. Ben Frain tackled the challenge of animating native dialog elements with @starting-style, allow-discrete, and closedby="any", documenting a Safari-specific inset reset bug along the way.
The March 2026 Baseline digest highlighted WebTransport, CSS subgrid, and contain-intrinsic-size reaching Widely Available status, while the @propjockey/breakpoint-system npm package demonstrated using tan(atan2()) math to derive pixel-based breakpoints that automatically scale with user font-size preferences at 91% browser coverage.
Key Takeaways
Animating native dialog elements in and out requires @starting-style for entry, allow-discrete on transitions for exit, and a Safari inset workaround — all four pieces must be in place for cross-browser reliability.
GSAP 3.15's easeReverse solves the awkward reversed-animation problem cleanly and deprecates yoyoEase — update toggleable UI patterns (modals, drawers, menus) to use it.
CSS subgrid and contain-intrinsic-size are now Widely Available per the March 2026 Baseline digest — safe to ship without polyfills across production audiences.
