CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 3-2026
article
Dave Rupert's 2026 Site Redesign: Named Grid Lines, View Transitions, and Monospace
TAG: CSS
Dave Rupert's 2026 site redesign highlights three CSS-driven changes. First, the entire site switched to Cascadia Mono, a variant of Microsoft's Cascadia Code, chosen partly because it includes the № glyph missing from many indie fonts. Second, layout control improved dramatically through named CSS grid lines (e.g. grid-column: wide-start / wide-end), a technique from Stephanie Eckles, replacing brittle negative-margin overrides with composable modifier classes. Third, multi-page view transitions were redesigned: the homepage SVG logo now morphs into the navigation bar on subpages using a named view-transition. The CSS was trimmed from 557 to 391 lines (~0.8 KB brotli savings) by leveraging :is(), :has(), and CSS nesting to reduce selector verbosity.
The new ::details-content pseudo-element gives CSS direct access to the expandable content container inside a <details> element — something previously impossible without extra wrapper divs. Chrome 131 shipped it in November 2024, Safari 18.4 added support on March 31 2025, and Firefox 143 followed in September 2025, making it Baseline newly available across all three engines. A practical use case is absolute positioning: the author overlays an expanding form field on top of a card grid using position, width, and z-index on ::details-content, preventing layout shift. The pseudo-element also unlocks height transition animations, background styling, and overflow control. Progressive enhancement is straightforward via @supports selector(::details-content).
Theming Animations Using CSS Relative Colors (Smashing Animations Part 8)
TAG: COLOR
Andy Clarke demonstrates how CSS relative colors in the OKLCH color space can replace manual palette management for SVG animations. The technique defines a single --foundation custom property, then derives every fill, stroke, and gradient stop using oklch(from var(--foundation) calc(l ± n) calc(c * n) calc(h ± n)). Clarke's rule of thumb: move lightness (add/subtract), scale chroma (multiply), rotate hue (add/subtract degrees) — multiplication keeps chroma ratios proportional when the foundation color changes. To animate colors smoothly, each OKLCH channel is split into three typed@property registrations (syntax: "<number>") and then recombined into --foundation. One animated flame token drives both lamp glows and a mix-blend-mode: color overlay in a mine scene — changing a single @keyframes value recolors the entire illustration.
An Update on Customizable Selects: The Multiple Select
TAG: FORMS
Brecht De Ruyte previews the in-development CSS customizable <select multiple> element, currently testable in Chrome Canary. Opting in with appearance: base-select on both the select and its ::picker(select) pseudo-element transforms multi-selection UX: mouse clicks no longer require holding Ctrl/Cmd, matching the existing single-tap behavior on touch devices. A .options-grid div inside the select enables display: grid layout with options styled as cards using the ::checkmark pseudo-element. Setting size="1" on a multiple select produces a dropdown-style picker with consistent checkmarks. The author also proposes using <selectedcontent> with a wrapper div and a ::after comma pseudo-element to display chosen options inline. The listbox rendering mode for single-height multiselects is planned for Chrome 145.
CSS now ships four scroll-driven primitives that can replace entire JavaScript libraries: scroll state container queries (container-type: scroll-state), scroll target groups with the :target-current pseudo-class for auto-highlighting table-of-contents links, ::scroll-marker and ::scroll-marker-group pseudo-elements for fully custom carousel indicators, and ::scroll-button pseudo-elements for auto-disabling prev/next controls. scroll-state lets you query whether an element is scrollable (scroll-top), stuck via position: sticky (stuck), or snapped in a given axis (snapped-x). Every feature demonstrated — a scroll-to-top button, a sticky header that restyled on stick, a live table of contents, and a complete CSS-only carousel with snap animations — uses zero JavaScript. Browser support is arriving in Chromium-based engines.
Kevin Powell works through recreating a multi-layered radial-gradient button effect entirely in CSS, thinking aloud as a design challenge. The core technique stacks multiple radial-gradient() calls in the background property, each with a different position (e.g. circle at 25% 75%), and registers each positional value as a typed @property with syntax: "<percentage>" so CSS can interpolate them inside @keyframes animations. A separate @property registers the button fill color (syntax: "<color>") to enable smooth transition between a solid-fill and bordered state on :hover. Background-origin (padding-box vs. content-box) controls whether gradients bleed under transparent borders. The video also explores animation-delay: calc(sibling-index * -500ms) to stagger identical buttons, and honestly reflects on when background-position animation is simpler than per-gradient custom properties.
CSS now ships four scroll-driven primitives that can replace entire JavaScript libraries: scroll state container queries (container-type: scroll-state), scroll target groups with the :target-current pseudo-class for auto-highlighting table-of-contents links, ::scroll-marker and ::scroll-marker-group pseudo-elements for fully custom carousel indicators, and ::scroll-button pseudo-elements for auto-disabling prev/next controls. scroll-state lets you query whether an element is scrollable (scroll-top), stuck via position: sticky (stuck), or snapped in a given axis (snapped-x). Every feature demonstrated — a scroll-to-top button, a sticky header that restyled on stick, a live table of contents, and a complete CSS-only carousel with snap animations — uses zero JavaScript. Browser support is arriving in Chromium-based engines.
Kevin Powell works through recreating a multi-layered radial-gradient button effect entirely in CSS, thinking aloud as a design challenge. The core technique stacks multiple radial-gradient() calls in the background property, each with a different position (e.g. circle at 25% 75%), and registers each positional value as a typed @property with syntax: "<percentage>" so CSS can interpolate them inside @keyframes animations. A separate @property registers the button fill color (syntax: "<color>") to enable smooth transition between a solid-fill and bordered state on :hover. Background-origin (padding-box vs. content-box) controls whether gradients bleed under transparent borders. The video also explores animation-delay: calc(sibling-index * -500ms) to stagger identical buttons, and honestly reflects on when background-position animation is simpler than per-gradient custom properties.
Dave Rupert's 2026 Site Redesign: Named Grid Lines, View Transitions, and Monospace
Dave Rupert's 2026 site redesign highlights three CSS-driven changes. First, the entire site switched to Cascadia Mono, a variant of Microsoft's Cascadia Code, chosen partly because it includes the № glyph missing from many indie fonts. Second, layout control improved dramatically through named CSS grid lines (e.g. grid-column: wide-start / wide-end), a technique from Stephanie Eckles, replacing brittle negative-margin overrides with composable modifier classes. Third, multi-page view transitions were redesigned: the homepage SVG logo now morphs into the navigation bar on subpages using a named view-transition. The CSS was trimmed from 557 to 391 lines (~0.8 KB brotli savings) by leveraging :is(), :has(), and CSS nesting to reduce selector verbosity.
The new ::details-content pseudo-element gives CSS direct access to the expandable content container inside a <details> element — something previously impossible without extra wrapper divs. Chrome 131 shipped it in November 2024, Safari 18.4 added support on March 31 2025, and Firefox 143 followed in September 2025, making it Baseline newly available across all three engines. A practical use case is absolute positioning: the author overlays an expanding form field on top of a card grid using position, width, and z-index on ::details-content, preventing layout shift. The pseudo-element also unlocks height transition animations, background styling, and overflow control. Progressive enhancement is straightforward via @supports selector(::details-content).
Theming Animations Using CSS Relative Colors (Smashing Animations Part 8)
Andy Clarke demonstrates how CSS relative colors in the OKLCH color space can replace manual palette management for SVG animations. The technique defines a single --foundation custom property, then derives every fill, stroke, and gradient stop using oklch(from var(--foundation) calc(l ± n) calc(c * n) calc(h ± n)). Clarke's rule of thumb: move lightness (add/subtract), scale chroma (multiply), rotate hue (add/subtract degrees) — multiplication keeps chroma ratios proportional when the foundation color changes. To animate colors smoothly, each OKLCH channel is split into three typed@property registrations (syntax: "<number>") and then recombined into --foundation. One animated flame token drives both lamp glows and a mix-blend-mode: color overlay in a mine scene — changing a single @keyframes value recolors the entire illustration.
An Update on Customizable Selects: The Multiple Select
Brecht De Ruyte previews the in-development CSS customizable <select multiple> element, currently testable in Chrome Canary. Opting in with appearance: base-select on both the select and its ::picker(select) pseudo-element transforms multi-selection UX: mouse clicks no longer require holding Ctrl/Cmd, matching the existing single-tap behavior on touch devices. A .options-grid div inside the select enables display: grid layout with options styled as cards using the ::checkmark pseudo-element. Setting size="1" on a multiple select produces a dropdown-style picker with consistent checkmarks. The author also proposes using <selectedcontent> with a wrapper div and a ::after comma pseudo-element to display chosen options inline. The listbox rendering mode for single-height multiselects is planned for Chrome 145.
This week's styling issue is a showcase of CSS becoming genuinely capable of replacing JavaScript for interaction patterns that once required libraries. The featured video from Web Dev Simplified demonstrates four new scroll-driven primitives arriving in Chromium: container-type: scroll-state for querying sticky/snapped/scrollable status, the :target-current pseudo-class for auto-highlighted table-of-contents links, ::scroll-marker and ::scroll-marker-group for custom carousel indicators, and ::scroll-button for self-disabling prev/next controls. Every demo — sticky headers that restyle on stick, live ToC highlights, full carousels — is zero JavaScript.
The theme of typed @property unlocking previously impossible animation runs through multiple items. Kevin Powell registers individual radial-gradient positions as syntax: "<percentage>" custom properties so CSS can interpolate them inside @keyframes, producing layered animated gradient buttons. Andy Clarke takes the same idea further for SVG theming: a single --foundation token in oklch() drives every fill, stroke, and gradient stop — animating OKLCH channels via split @property registrations so one @keyframes value recolors an entire illustration. Dave Rupert's 2026 site redesign ties the practical thread together: named grid lines replace brittle negative-margin hacks, multi-page view transitions morph the SVG logo into the nav bar, and aggressive use of :is(), :has(), and CSS nesting shaved 166 lines of CSS.
Two items address native form elements. Brecht De Ruyte previews the in-progress <select multiple> with appearance: base-select, enabling grid-card layouts and eliminating Ctrl/Cmd multi-select. And the now-Baseline::details-content pseudo-element finally lets developers style the expandable container inside <details> — enabling height animations, absolute overlays, and overflow control — with clean progressive enhancement via @supports selector(::details-content).
Key Takeaways
Four new CSS scroll primitives (scroll-state, :target-current, ::scroll-marker, ::scroll-button) arriving in Chromium can replace entire JavaScript libraries for carousels, sticky headers, and live ToC highlighting.
Typed @property registrations unlock smooth CSS animation of radial-gradient positions and OKLCH color channels, enabling layered effects that were previously only achievable in JavaScript.
The ::details-content pseudo-element is now Baseline across all three engines, giving direct CSS access to <details> content for height animations, overlays, and overflow control.
