CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 26-2026
article
Modern CSS Theming with light-dark(), contrast-color(), and Style Queries
TAG: THEMING
Una Kravets demonstrates a declarative CSS theming system that became Baseline Newly Available in May 2026. The technique layers four features: light-dark() resolves shadow vs. glow-border elevation per color-scheme, contrast-color() automatically picks black or white text for any background using the WCAG contrast algorithm, @property registers the contrast result as an animatable custom property, and @container style() queries branch into hue-tinted palettes derived via oklch relative color syntax. Each card receives only a single --brand-color; the system derives background, elevation mechanism, and full text palette from that value alone. An optional @function wrapper keeps the code clean but currently limits support to Chrome 139+.
Manuel Matuzovic examines how CSS Grid Lanes — a new layout using display: grid-lanes that balances columns by shortest-column placement — inherently decouples visual order from DOM order, failing WCAG 2.4.3 Focus Order. The flow-tolerance property adjusts how much column-height difference triggers reordering, but even values up to 40rem often leave focus jumping unpredictably for keyboard users. The emerging reading-flow: grid-rows property could fix this, but it is Chromium-only and not yet scoped to Grid Lanes. Safari already ships Grid Lanes without reading-flow support, creating a live accessibility gap. Matuzovic recommends always keyboard-testing Grid Lanes and treating a high flow-tolerance value as mandatory until reading-flow lands cross-browser.
Experimenting with the New Pure CSS random() Function
TAG: ANIMATION
Polypane explores the emerging CSS random() function through seven interactive demos — bokeh, falling petals, flingable polaroids, a visual poem, a shaky grid, rotating rectangles, and an aurora — all built without JavaScript. Key gotchas include that random() re-evaluates on every custom property usage unless the element-scoped keyword (soon renamed per-element) is applied. Combining random() with a stepped integer and CSS if() style queries enables a weighted random-item() polyfill for discrete values like display type. Browser support is currently Polypane 29+ and Chromium 148+ behind a flag; Safari 26.2+ has partial support, and Firefox has none yet.
Cranking View Transitions up to 11 — All Day Hey! 2026
TAG: VIEW TRANSITIONS
Bramus Van Damme shares his conference talk from the final edition of All Day Hey! in Leeds, where he explored experimental uses of the View Transition API beyond its documented limits. The session combined View Transitions with Scroll-Driven Animations, triggered transitions automatically via MutationObserver, and revived Internet Explorer-style page transitions using the modern API. The slides are available on slidr.io and the full recording is on YouTube. The post also notes that Bramus received a public shout-out from Jake Archibald on Bluesky for continuing View Transitions stewardship after Archibald left Google.
Cassidy Williams walks through building a concentric-ring text mask using the CSS mask property with a repeating-radial-gradient centered on a manually tuned coordinate — in this case around the letter "o" in the heading. The stripe thickness is controlled by a --stripes custom property registered with @property, which enables smooth CSS animation of the gradient because browsers treat gradients as images and cannot interpolate them otherwise. The technique required significant cross-browser tuning: rem units in the gradient broke Firefox, and Safari animation required pixel-level adjustments. The post includes a CodePen demo and a comparison between the human-readable and deliberately obfuscated shorthand forms.
Patrick Brosset synthesizes developer pain points around SVG from four sources: Chromium bug tracker votes, Interop focus area proposals, the State of CSS 2025 survey, and a social media poll. The clearest signal across all sources is that external SVG assets — loaded via img or background-image — cannot be styled with CSS custom properties or currentColor; CSS Linked Parameters is the spec solution and Firefox has already shipped it with Chromium work underway. Other top themes include z-index and calc() gaps in SVG, unreliable text wrapping, filter performance, foreignObject inconsistencies, and the lack of stroke-alignment. The analysis concludes that making SVG behave as a first-class, themeable, interoperable web asset would have the broadest impact.
Figma Motion Crash Course — Build an Animated Promo Video in 30 Minutes
DesignCourse walks through Figma Motion, the new timeline-based animation system announced at Config 2026, by building a full animated promo video from scratch. The tutorial covers keyframe placement, easing curves (ease-in, ease-out, custom cubic beziers), clip-content frames as CSS-style masks for text reveal animations, and staggering multiple elements for natural timing. It also introduces Figma Shaders — a new fill type that lets you apply GLSL-like shader effects and animate their parameters directly on the timeline. The host argues that motion quality depends on taste and iterative feel rather than AI-generated output, and exports the final result as a 60 fps MP4 (requires a paid Figma plan).
Modern CSS Theming with light-dark(), contrast-color(), and Style Queries
Una Kravets demonstrates a declarative CSS theming system that became Baseline Newly Available in May 2026. The technique layers four features: light-dark() resolves shadow vs. glow-border elevation per color-scheme, contrast-color() automatically picks black or white text for any background using the WCAG contrast algorithm, @property registers the contrast result as an animatable custom property, and @container style() queries branch into hue-tinted palettes derived via oklch relative color syntax. Each card receives only a single --brand-color; the system derives background, elevation mechanism, and full text palette from that value alone. An optional @function wrapper keeps the code clean but currently limits support to Chrome 139+.
Figma Motion Crash Course — Build an Animated Promo Video in 30 Minutes
DesignCourse walks through Figma Motion, the new timeline-based animation system announced at Config 2026, by building a full animated promo video from scratch. The tutorial covers keyframe placement, easing curves (ease-in, ease-out, custom cubic beziers), clip-content frames as CSS-style masks for text reveal animations, and staggering multiple elements for natural timing. It also introduces Figma Shaders — a new fill type that lets you apply GLSL-like shader effects and animate their parameters directly on the timeline. The host argues that motion quality depends on taste and iterative feel rather than AI-generated output, and exports the final result as a 60 fps MP4 (requires a paid Figma plan).
Manuel Matuzovic examines how CSS Grid Lanes — a new layout using display: grid-lanes that balances columns by shortest-column placement — inherently decouples visual order from DOM order, failing WCAG 2.4.3 Focus Order. The flow-tolerance property adjusts how much column-height difference triggers reordering, but even values up to 40rem often leave focus jumping unpredictably for keyboard users. The emerging reading-flow: grid-rows property could fix this, but it is Chromium-only and not yet scoped to Grid Lanes. Safari already ships Grid Lanes without reading-flow support, creating a live accessibility gap. Matuzovic recommends always keyboard-testing Grid Lanes and treating a high flow-tolerance value as mandatory until reading-flow lands cross-browser.
Experimenting with the New Pure CSS random() Function
Polypane explores the emerging CSS random() function through seven interactive demos — bokeh, falling petals, flingable polaroids, a visual poem, a shaky grid, rotating rectangles, and an aurora — all built without JavaScript. Key gotchas include that random() re-evaluates on every custom property usage unless the element-scoped keyword (soon renamed per-element) is applied. Combining random() with a stepped integer and CSS if() style queries enables a weighted random-item() polyfill for discrete values like display type. Browser support is currently Polypane 29+ and Chromium 148+ behind a flag; Safari 26.2+ has partial support, and Firefox has none yet.
Cranking View Transitions up to 11 — All Day Hey! 2026
Bramus Van Damme shares his conference talk from the final edition of All Day Hey! in Leeds, where he explored experimental uses of the View Transition API beyond its documented limits. The session combined View Transitions with Scroll-Driven Animations, triggered transitions automatically via MutationObserver, and revived Internet Explorer-style page transitions using the modern API. The slides are available on slidr.io and the full recording is on YouTube. The post also notes that Bramus received a public shout-out from Jake Archibald on Bluesky for continuing View Transitions stewardship after Archibald left Google.
Cassidy Williams walks through building a concentric-ring text mask using the CSS mask property with a repeating-radial-gradient centered on a manually tuned coordinate — in this case around the letter "o" in the heading. The stripe thickness is controlled by a --stripes custom property registered with @property, which enables smooth CSS animation of the gradient because browsers treat gradients as images and cannot interpolate them otherwise. The technique required significant cross-browser tuning: rem units in the gradient broke Firefox, and Safari animation required pixel-level adjustments. The post includes a CodePen demo and a comparison between the human-readable and deliberately obfuscated shorthand forms.
Patrick Brosset synthesizes developer pain points around SVG from four sources: Chromium bug tracker votes, Interop focus area proposals, the State of CSS 2025 survey, and a social media poll. The clearest signal across all sources is that external SVG assets — loaded via img or background-image — cannot be styled with CSS custom properties or currentColor; CSS Linked Parameters is the spec solution and Firefox has already shipped it with Chromium work underway. Other top themes include z-index and calc() gaps in SVG, unreliable text wrapping, filter performance, foreignObject inconsistencies, and the lack of stroke-alignment. The analysis concludes that making SVG behave as a first-class, themeable, interoperable web asset would have the broadest impact.
CSS saw several significant developments this week spanning theming, creative effects, accessibility, and tooling. Una Kravets demonstrated a fully declarative theming system — now Baseline Newly Available as of May 2026 — combining light-dark(), contrast-color(), @property, and @container style() queries to derive complete palettes from a single --brand-color custom property using oklch relative color syntax. Separately, Bramus Van Damme's All Day Hey! talk showed experimental combinations of the View Transition API with Scroll-Driven Animations and MutationObserver-triggered transitions, demonstrating how far the two APIs can stretch together.
On the creative side, Polypane explored the emerging CSS random() function (Chromium 148+ behind a flag, Polypane 29+) with seven pure-CSS demos. The key gotcha: without the element-scoped keyword (being renamed per-element), random() re-evaluates on each custom property reference. Cassidy Williams showed how @property-registered custom properties enable smooth animation of repeating-radial-gradient masks, a technique requiring careful cross-browser tuning since rem units break Firefox and Safari needed pixel-level fixes.
Accessibility received focused attention from two articles. Manuel Matuzovic revealed that CSS Grid Lanes (display: grid-lanes) inherently breaks WCAG 2.4.3 Focus Order because its column-balancing algorithm decouples visual and DOM order — and the fix, reading-flow: grid-rows, is Chromium-only and not yet scoped to Grid Lanes while Safari has already shipped Grid Lanes without it. Patrick Brosset's SVG gap analysis across four sources converged on the same top pain point: external SVGs loaded via img cannot be styled with CSS custom properties, and CSS Linked Parameters (already shipping in Firefox) is the spec solution.
Key Takeaways
CSS Grid Lanes ships in Safari without reading-flow support, creating a live WCAG 2.4.3 Focus Order violation — keyboard-test every Grid Lanes layout now and treat a high flow-tolerance value as mandatory until reading-flow lands cross-browser.
Una Kravets' light-dark() + contrast-color() + @container style() theming stack is now Baseline Newly Available: one --brand-color drives background, elevation, and full text palette with zero JS.
CSS random() is advancing (Chromium 148+ flag, Polypane 29+) but the element-scoped / per-element keyword is essential to avoid re-evaluation on every custom property read — Safari and Firefox support is still incomplete.
