CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 27-2026
article
The Goldilocks Customizable Select Height
TAG: FORMS
Jake Archibald digs into the surprisingly tricky problem of sizing the picker dropdown for a fully customizable select element. Using the ::picker(select) pseudo-element, he arrives at a solution that prevents the popup from hitting the viewport edge, getting too small to be usable, or growing unnecessarily tall. The key insight is calc-size(), which lets intrinsic sizes like fit-content and stretch participate in min() comparisons — enabling both a minimum of calc-size(fit-content, min(size, 12em)) and a maximum of calc-size(stretch, min(size, 30em)). Progressive fallbacks using @supports and position-try-fallbacks with flip-block handle Firefox and Safari gracefully until calc-size() gains universal support.
Pawel Grzybek offers a practical cheatsheet for display: grid-lanes, the native CSS masonry layout that resolved the long-running Apple vs. Google spec debate. The post covers column-based layouts via grid-template-columns, row-based layouts via grid-template-rows, spanning items with grid-column: span 2, and the flow-tolerance property that adjusts the placement algorithm to avoid visually confusing or accessibility-hostile orderings. Browser support is currently limited — Chrome and Firefox do not yet ship it — while Safari 26.4 has the best implementation, though still with some WPT failures. Progressive enhancement with a regular grid fallback is recommended.
Modes and Themes That Stick: Building a Persistent Toggle Solution
TAG: THEMING
This article draws a clear line between mode (light/dark) and theme (accent color), arguing that conflating them into a single attribute produces a combinatorial mess. The recommended architecture separates the two into data-mode and data-theme attributes driven by native radio inputs, with three progressive enhancement layers: a CSS-only foundation, a tiny blocking inline head script that reads localStorage before first paint to eliminate the flash of wrong color, and a deferred script that handles interactivity and OS-preference change events. A key nuance is storing the user's intent ("system") rather than the resolved value, so the page tracks OS changes live. Accessibility requirements — fieldset/legend, :focus-visible, WCAG contrast — are covered in detail.
David Bushell revisits the classic full-bleed utility pattern — width: 100vw with a negative margin offset — and explains why viewport units cause pixel-level misalignment when the OS scrollbar consumes space. The modern fix replaces viewport units with container query units: the body element becomes a named container (container: body / inline-size), and the full-bleed class uses inline-size: 100cqi instead. To handle nested containers, @property is used to define --body-size as an inheritable, type-registered length, so the value is resolved at the point of assignment inside a child container and inherited correctly by the full-bleed element. Bushell also notes a proposed future syntax — 100cqi(body) — that would eliminate the workaround entirely.
A practical overview of five modern CSS properties that eliminate long-standing workarounds. scrollbar-gutter: stable reserves scrollbar space permanently, preventing the layout jump when a modal sets overflow: hidden. The system-ui font keyword provides a platform-native fallback that looks intentional rather than arbitrary. align-content: center on a block container centers a child vertically without introducing a Flexbox or Grid context. The light-dark() function condenses dual-theme variable definitions from two separate@media blocks into a single line per token. Finally, logical text-align values (start, end) replace directional left/right, making RTL support automatic. Each section contrasts the old workaround with the one-liner replacement.
Manuel Matuzovic examines the accessibility pitfall of using display: grid-lanes in Safari, which supports the layout but not the reading-flow property needed to keep focus order aligned with visual order. He recommends gating Grid Lanes behind an @supports check that requires both display: grid-lanes and reading-flow: grid-rows, ensuring Safari falls back to a regular grid rather than shipping an inaccessible layout. As a less guarded alternative, flow-tolerance: infinite can reduce the worst focus-order mismatches, though it does not fully solve them. His conclusion is cautious: Grid Lanes are easy to adopt progressively but the DOM-vs-visual-order tension requires careful keyboard and screen-reader testing.
Native Popovers with Smooth Animations (No JS Required)
Kevin Powell walks through building a fully animated popover using only the HTML popover attribute and CSS — no JavaScript. He explains the implicit anchor relationship between a button's popovertarget and its popover, uses CSS anchor positioning with position-area and position-try: flip-block to keep the popover on-screen, and then layers in smooth open/close animations via the :popover-open pseudo-class, @starting-style, and transition-behavior: allow-discrete. The video highlights a key gotcha: display must not be set on the popover element itself (which would override the UA display: none), but instead inside :popover-open, and layout properties like grid-template-columns must live outside the pseudo-class so they persist during the closing transition.
Jake Archibald digs into the surprisingly tricky problem of sizing the picker dropdown for a fully customizable select element. Using the ::picker(select) pseudo-element, he arrives at a solution that prevents the popup from hitting the viewport edge, getting too small to be usable, or growing unnecessarily tall. The key insight is calc-size(), which lets intrinsic sizes like fit-content and stretch participate in min() comparisons — enabling both a minimum of calc-size(fit-content, min(size, 12em)) and a maximum of calc-size(stretch, min(size, 30em)). Progressive fallbacks using @supports and position-try-fallbacks with flip-block handle Firefox and Safari gracefully until calc-size() gains universal support.
Native Popovers with Smooth Animations (No JS Required)
Kevin Powell walks through building a fully animated popover using only the HTML popover attribute and CSS — no JavaScript. He explains the implicit anchor relationship between a button's popovertarget and its popover, uses CSS anchor positioning with position-area and position-try: flip-block to keep the popover on-screen, and then layers in smooth open/close animations via the :popover-open pseudo-class, @starting-style, and transition-behavior: allow-discrete. The video highlights a key gotcha: display must not be set on the popover element itself (which would override the UA display: none), but instead inside :popover-open, and layout properties like grid-template-columns must live outside the pseudo-class so they persist during the closing transition.
Pawel Grzybek offers a practical cheatsheet for display: grid-lanes, the native CSS masonry layout that resolved the long-running Apple vs. Google spec debate. The post covers column-based layouts via grid-template-columns, row-based layouts via grid-template-rows, spanning items with grid-column: span 2, and the flow-tolerance property that adjusts the placement algorithm to avoid visually confusing or accessibility-hostile orderings. Browser support is currently limited — Chrome and Firefox do not yet ship it — while Safari 26.4 has the best implementation, though still with some WPT failures. Progressive enhancement with a regular grid fallback is recommended.
Modes and Themes That Stick: Building a Persistent Toggle Solution
This article draws a clear line between mode (light/dark) and theme (accent color), arguing that conflating them into a single attribute produces a combinatorial mess. The recommended architecture separates the two into data-mode and data-theme attributes driven by native radio inputs, with three progressive enhancement layers: a CSS-only foundation, a tiny blocking inline head script that reads localStorage before first paint to eliminate the flash of wrong color, and a deferred script that handles interactivity and OS-preference change events. A key nuance is storing the user's intent ("system") rather than the resolved value, so the page tracks OS changes live. Accessibility requirements — fieldset/legend, :focus-visible, WCAG contrast — are covered in detail.
David Bushell revisits the classic full-bleed utility pattern — width: 100vw with a negative margin offset — and explains why viewport units cause pixel-level misalignment when the OS scrollbar consumes space. The modern fix replaces viewport units with container query units: the body element becomes a named container (container: body / inline-size), and the full-bleed class uses inline-size: 100cqi instead. To handle nested containers, @property is used to define --body-size as an inheritable, type-registered length, so the value is resolved at the point of assignment inside a child container and inherited correctly by the full-bleed element. Bushell also notes a proposed future syntax — 100cqi(body) — that would eliminate the workaround entirely.
A practical overview of five modern CSS properties that eliminate long-standing workarounds. scrollbar-gutter: stable reserves scrollbar space permanently, preventing the layout jump when a modal sets overflow: hidden. The system-ui font keyword provides a platform-native fallback that looks intentional rather than arbitrary. align-content: center on a block container centers a child vertically without introducing a Flexbox or Grid context. The light-dark() function condenses dual-theme variable definitions from two separate@media blocks into a single line per token. Finally, logical text-align values (start, end) replace directional left/right, making RTL support automatic. Each section contrasts the old workaround with the one-liner replacement.
Manuel Matuzovic examines the accessibility pitfall of using display: grid-lanes in Safari, which supports the layout but not the reading-flow property needed to keep focus order aligned with visual order. He recommends gating Grid Lanes behind an @supports check that requires both display: grid-lanes and reading-flow: grid-rows, ensuring Safari falls back to a regular grid rather than shipping an inaccessible layout. As a less guarded alternative, flow-tolerance: infinite can reduce the worst focus-order mismatches, though it does not fully solve them. His conclusion is cautious: Grid Lanes are easy to adopt progressively but the DOM-vs-visual-order tension requires careful keyboard and screen-reader testing.
CSS layout and UI primitives took center stage this week. The native CSS masonry layout — finalized as display: grid-lanes after the long Apple vs. Google spec dispute — earned two complementary posts: a practical cheatsheet covering grid-template-columns, grid-template-rows, spanning via grid-column: span 2, and the flow-tolerance placement property; and an accessibility warning that Safari supports display: grid-lanes but not reading-flow: grid-rows, so developers should gate the feature behind an @supports check requiring both to prevent broken focus order. Chrome and Firefox have not yet shipped it; Safari 26.4 has the best current implementation.
Jake Archibald published a deep dive on sizing the picker dropdown for the fully customizable select element, arriving at a calc-size()-based solution that lets fit-content and stretch participate in min() comparisons, with @supports and position-try-fallbacks: flip-block providing graceful fallbacks in Firefox and Safari. David Bushell replaced the old 100vw full-bleed hack with container query units — naming body as a container and using inline-size: 100cqi — with @property handling correct inheritance through nested containers.
Kevin Powell demonstrated building fully animated popovers with zero JavaScript using the HTML popover attribute, CSS anchor positioning, @starting-style, and transition-behavior: allow-discrete. A separate post catalogued five modern CSS one-liners — scrollbar-gutter: stable, system-ui, align-content: center on block elements, light-dark(), and logical text-align: start/end — that eliminate common older workarounds.
Key Takeaways
display: grid-lanes (native CSS masonry) is live in Safari 26.4 but requires an @supports check for both display: grid-lanes and reading-flow: grid-rows before shipping — Safari lacks reading-flow support, breaking keyboard focus order without the guard.
calc-size() enables intrinsic sizes like fit-content and stretch to participate in min()/max() comparisons, unlocking correct customizable select dropdown sizing without JavaScript.
The popover attribute plus @starting-style and transition-behavior: allow-discrete enables fully animated, anchor-positioned popovers with zero JavaScript — a pattern now worth using in production.
