CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 9-2026
article
Patrick - Embrace the chaos — The shape and flow of masonry layouts
TAG: DEEP DIVE
With native masonry layout arriving via display: grid-lanes, this article frames masonry through two distinct lenses: shape (the visual column or row structure defined by grid-template-columns or grid-template-rows) and flow (the opportunistic packing algorithm that always picks the shortest lane, leaving developers with no control beyond the starting edge). The author compares masonry to both Grid — which shares grid-template syntax and lane-placement via grid-column and grid-row — and Flexbox, which similarly defines only one dimension and restricts flow to direction and starting edge. The key distinction is that Grid decouples shape from flow via grid-auto-flow, while masonry never can: its packing algorithm is inherently order-agnostic. The practical takeaway is that masonry best suits image galleries and portfolios where visual density matters more than DOM reading order.
CSS inline if() and style queries both accept a style() condition, but the colon syntax (style(--n: 3)) and the equals syntax (style(--n = 3)) behave fundamentally differently. With the colon form, the browser performs exact computed-value string matching: --n: calc(6/2) does not match 3 because the computed value remains calc(6/2) unreduced. The equals form triggers the style-range path, which substitutes the custom property as if via var(), then resolves both sides to a numeric type (integer, length, percentage, etc.) before comparing — so calc(6/2) = 3 evaluates to true. Conversely, the equals form fails for non-numeric string values like "new" because they cannot be resolved to any recognized type. The practical rule: use colon for string-like sentinel values and equals for numeric math comparisons.
Twitter's 2015 heart animation — 16 simultaneously animating elements including 14 particles — popularized sprite-based CSS animation as a performance strategy for low-end devices. The modern approach uses object-fit: cover to crop a spritesheet to a single-frame viewport on an img element, then shifts frames via object-position inside a CSS keyframe animation. The critical detail is the steps() timing function: the default jump-end excludes the final keyframe value mid-loop, so looping spritesheets must use steps(N, jump-none) to include all N frames evenly. A 2000×800px sheet with 5 frames renders at 200×400px on screen for retina sharpness. In 2026, performance is no longer a compelling reason to prefer sprites over procedural DOM animation — sprites are best reserved for content that genuinely looks like game-style sprite art.
Three Reasons Your scroll-snap Container May Be Overflowing on Mobile
TAG: GUIDE
A fieldset used as a scroll-snap: x mandatory flex container blew out to ~1180px on mobile despite explicit inline-size: 100vw and 100dvi constraints. The first culprit is the UA stylesheet's fieldset { min-inline-size: min-content } rule, which makes the element as wide as its unwrapped flex children — overriding any explicit sizing. Fix: min-inline-size: unset. After that fix, page overflow persisted because visually hidden radio inputs (position: absolute, inline-size: 1px) had no positioned ancestor nearby, so they anchored to a distant containing block over 1100px to the right of the viewport — invisible to the standard offsetWidth diagnostic but caught by getBoundingClientRect(). Fix: position: relative on the wrapping label. Both fixes together allowed removal of all explicit inline-size declarations, with the container sizing itself correctly.
Safari Technology Preview 238 (WebKit commits 306596–307618) ships several notable CSS and rendering improvements. Threaded time-based animation resolution now synchronizes accelerated time-based animations with scroll-driven animations off the main thread, and enables CSS Motion Path animations to be GPU-accelerated. The CSS :open pseudo-class lands, matching form elements and other elements in an open state. Customizable select gets enabled via appearance: base-select, allowing arbitrary content and styling in select dropdowns. On the layout side, scrollable overflow computation for block containers now accounts for padding-inline-end per the CSS Overflow spec, and scroll anchoring is enabled to prevent scroll-position jumps when content is inserted or removed above the viewport.
Kevin Powell live-explores a CSS-only shortest-path demo by Temani Afif that uses no JavaScript for its calculations. The demo tracks node positions via view timelines on the inline (X) and block (Y) axes, computes inter-node distances with hypot() inside counter-reset declarations, and selects the shortest path using container style queries with range syntax (checking if a path's distance equals the CSS min() of all distances). Anchor positioning connects the line elements to nodes, steps() drives discrete animation frames, and registered custom properties hold per-axis distances for every node pair. Kevin notes that CSS now spans math functions (hypot, sin, tan, round), scroll timelines, style queries, anchor positioning, and ATTR() — features that blur the line between styling and programming.
Patrick - Embrace the chaos — The shape and flow of masonry layouts
With native masonry layout arriving via display: grid-lanes, this article frames masonry through two distinct lenses: shape (the visual column or row structure defined by grid-template-columns or grid-template-rows) and flow (the opportunistic packing algorithm that always picks the shortest lane, leaving developers with no control beyond the starting edge). The author compares masonry to both Grid — which shares grid-template syntax and lane-placement via grid-column and grid-row — and Flexbox, which similarly defines only one dimension and restricts flow to direction and starting edge. The key distinction is that Grid decouples shape from flow via grid-auto-flow, while masonry never can: its packing algorithm is inherently order-agnostic. The practical takeaway is that masonry best suits image galleries and portfolios where visual density matters more than DOM reading order.
Kevin Powell live-explores a CSS-only shortest-path demo by Temani Afif that uses no JavaScript for its calculations. The demo tracks node positions via view timelines on the inline (X) and block (Y) axes, computes inter-node distances with hypot() inside counter-reset declarations, and selects the shortest path using container style queries with range syntax (checking if a path's distance equals the CSS min() of all distances). Anchor positioning connects the line elements to nodes, steps() drives discrete animation frames, and registered custom properties hold per-axis distances for every node pair. Kevin notes that CSS now spans math functions (hypot, sin, tan, round), scroll timelines, style queries, anchor positioning, and ATTR() — features that blur the line between styling and programming.
CSS inline if() and style queries both accept a style() condition, but the colon syntax (style(--n: 3)) and the equals syntax (style(--n = 3)) behave fundamentally differently. With the colon form, the browser performs exact computed-value string matching: --n: calc(6/2) does not match 3 because the computed value remains calc(6/2) unreduced. The equals form triggers the style-range path, which substitutes the custom property as if via var(), then resolves both sides to a numeric type (integer, length, percentage, etc.) before comparing — so calc(6/2) = 3 evaluates to true. Conversely, the equals form fails for non-numeric string values like "new" because they cannot be resolved to any recognized type. The practical rule: use colon for string-like sentinel values and equals for numeric math comparisons.
Twitter's 2015 heart animation — 16 simultaneously animating elements including 14 particles — popularized sprite-based CSS animation as a performance strategy for low-end devices. The modern approach uses object-fit: cover to crop a spritesheet to a single-frame viewport on an img element, then shifts frames via object-position inside a CSS keyframe animation. The critical detail is the steps() timing function: the default jump-end excludes the final keyframe value mid-loop, so looping spritesheets must use steps(N, jump-none) to include all N frames evenly. A 2000×800px sheet with 5 frames renders at 200×400px on screen for retina sharpness. In 2026, performance is no longer a compelling reason to prefer sprites over procedural DOM animation — sprites are best reserved for content that genuinely looks like game-style sprite art.
Three Reasons Your scroll-snap Container May Be Overflowing on Mobile
A fieldset used as a scroll-snap: x mandatory flex container blew out to ~1180px on mobile despite explicit inline-size: 100vw and 100dvi constraints. The first culprit is the UA stylesheet's fieldset { min-inline-size: min-content } rule, which makes the element as wide as its unwrapped flex children — overriding any explicit sizing. Fix: min-inline-size: unset. After that fix, page overflow persisted because visually hidden radio inputs (position: absolute, inline-size: 1px) had no positioned ancestor nearby, so they anchored to a distant containing block over 1100px to the right of the viewport — invisible to the standard offsetWidth diagnostic but caught by getBoundingClientRect(). Fix: position: relative on the wrapping label. Both fixes together allowed removal of all explicit inline-size declarations, with the container sizing itself correctly.
Safari Technology Preview 238 (WebKit commits 306596–307618) ships several notable CSS and rendering improvements. Threaded time-based animation resolution now synchronizes accelerated time-based animations with scroll-driven animations off the main thread, and enables CSS Motion Path animations to be GPU-accelerated. The CSS :open pseudo-class lands, matching form elements and other elements in an open state. Customizable select gets enabled via appearance: base-select, allowing arbitrary content and styling in select dropdowns. On the layout side, scrollable overflow computation for block containers now accounts for padding-inline-end per the CSS Overflow spec, and scroll anchoring is enabled to prevent scroll-position jumps when content is inserted or removed above the viewport.
This week's featured piece reframes native masonry layout through the lens of shape versus flow: the display: grid-lanes spec gives developers column or row structure, but the packing algorithm — always choosing the shortest lane — is inherently order-agnostic and cannot be separated from the visual result the way Grid's grid-auto-flow can. The practical upshot is that masonry is best reserved for image galleries and portfolios where visual density trumps DOM reading order.
CSS's expanding capability set dominated the week's other highlights. Temani Afif's deep dive into the colon versus equals distinction inside style() conditions revealed that calc(6/2) matches 3 only with the equals form, since the colon form does exact computed-value string matching. Safari Technology Preview 238 shipped the :open pseudo-class, customizable select via appearance: base-select, and off-main-thread scroll-driven animation synchronization. Kevin Powell's walkthrough of a pure-CSS shortest-path demo illustrated how hypot(), container style queries, anchor positioning, and view timelines now blur the line between styling and programming.
On the practical debugging side, a deep-dive into mobile scroll-snap overflow uncovered two layered culprits: the UA stylesheet's fieldset min-inline-size: min-content rule, and visually hidden inputs anchoring to distant containing blocks — the latter invisible to offsetWidth but caught by getBoundingClientRect().
Key Takeaways
Native masonry via display: grid-lanes separates shape from the packing algorithm; flow is always order-agnostic, making it best for galleries over structured lists.
CSS style() colon syntax does exact string matching while equals triggers numeric resolution — critical for using custom properties in if() and style queries correctly.
