CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 12-2026
article
The Great CSS Expansion
TAG: CSS PLATFORM
A new wave of CSS features is replacing JavaScript libraries that collectively weigh over 322 kB minified and gzipped. CSS Anchor Positioning eliminates Floating UI and Popper.js by letting the browser handle tooltip placement with anchor-name and position-try fallbacks. The Popover API replaces Radix and Headless UI for light-dismiss overlays, while the native dialog element handles focus-trapping modals. Scroll-Driven Animations with animation-timeline: scroll() and view() run on the compositor thread, replacing GSAP ScrollTrigger. View Transitions, customizable select with appearance: base-select, CSS scroll-state queries, field-sizing: content, and the upcoming if() function round out a platform shift that could cut 44-146 kB of JavaScript from typical SPAs.
The CSS light-dark() function, previously limited to color values, is being extended to accept image values as well. This eliminates the need for @media (prefers-color-scheme: dark) blocks to swap background images, masks, or logos — a single background-image: light-dark(url(light.png), url(dark.png)) declaration now handles it while also respecting local color-scheme overrides. Chrome 150 and Firefox 150 both ship support, while Safari has no support yet. Feature detection works via @supports (background-image: light-dark(none, none)). Arguments must be two colors or two images — mixing types is not allowed due to how the CSS parser resolves value types at parse time. A future CSS @function combined with color-scheme() will eventually extend this pattern to any arbitrary value type.
Build a Shimmer Skeleton That Never Goes Out of Sync
TAG: LOADING UI
Traditional skeleton screens require a hand-crafted mirror component for every real component, with hardcoded widths, heights, and border radii that break whenever the real layout changes. This article walks through building a DOM-measurement approach: render the real component with mock data, hide text with color: transparent (not opacity or visibility), then use getBoundingClientRect() to measure each leaf element — img, h1-h6, p, span, button — relative to the container. getComputedStyle() captures each element's border-radius, with a 4px fallback for text nodes. A CSS @keyframes shimmer animation with background-size: 200% sweeps a semi-transparent gradient across each absolutely positioned block. In React, useLayoutEffect runs the measurement synchronously before the browser paints, preventing any flash of invisible content. Edge cases covered include zero-dimension elements, images without explicit sizes, SVG subtrees, and resize-during-load scenarios.
Accessible Text Color with the CSS contrast-color() Function
TAG: ACCESSIBILITY
The CSS contrast-color() function accepts any valid color value and returns either black or white — whichever meets the higher contrast ratio against the input. This eliminates manual WCAG ratio checks, JavaScript calculations, and per-variant text color declarations in design systems. The browser's algorithm must conform to WCAG AA's 4.5:1 minimum for normal text; ties resolve to white. The function is a simplified MVP pulled from CSS Color Level 6 into Level 5, renamed from the richer color-contrast() to contrast-color() — it currently only returns black or white, not arbitrary candidate colors. It pairs naturally with color-mix() and style queries to produce tinted contrast variants, and works seamlessly with prefers-color-scheme for theme-aware accessible palettes.
Sonner's unstyled: true mode on toastOptions strips all default styles and hands full control to the developer. Each toast is an li element; understanding its flat DOM structure — div[data-icon], div[data-content], button[data-cancel], button[data-action] as direct siblings — is essential for correct flex layout. Per-variant styling uses the classNames keys success, error, and info, with !important required on border-l-* to override the base border shorthand. The loading state requires special handling: .sonner-loader defaults to position: absolute and must be reset to static. Animation speed is controlled via the --toast-animation-duration CSS custom property, and inline transition styles require !important overrides. Data attributes including data-type, data-expanded, data-front, and data-visible enable fine-grained CSS targeting without JavaScript.
A ranked comparison of web image formats from BMP and TIFF (both D/C tier for large file sizes and limited web use) through GIF (D tier — 256-color limit, poor transparency, large files) and PNG (C tier — lossless, full alpha channel, but large). JPEG applies lossy 8x8 block compression to achieve roughly 25x size reduction versus BMP with negligible visible quality loss, but stays C tier given modern alternatives. WebP, released by Google in 2010, delivers better compression than JPEG at equivalent quality while adding transparency and animation support — a single WebP can be 10x smaller than an equivalent PNG. AVIF (S tier), backed by the AV1 codec, achieves 20-30% better compression than WebP, adds wide color gamut and HDR support, and has 96% browser coverage; the recommended strategy is AVIF with a WebP fallback.
Kevin Powell shares two practical tips for writing cleaner CSS @keyframes. First, comma-separating shared keyframe stops (e.g. 25%, 75%) eliminates duplicate declarations and means a single value change updates both stops at once. Second, omitting the from (0%) and to (100%) keyframes when they aren't needed prevents glitchy animation starts on elements that already have a transform applied — for example, a bell icon pre-rotated via a lean-left or lean-right class. Combining the individual CSS properties rotate and translate alongside transform lets independent rotation and translation animations layer without conflict, enabling each element to animate from its own starting position rather than always snapping back to the origin.
A new wave of CSS features is replacing JavaScript libraries that collectively weigh over 322 kB minified and gzipped. CSS Anchor Positioning eliminates Floating UI and Popper.js by letting the browser handle tooltip placement with anchor-name and position-try fallbacks. The Popover API replaces Radix and Headless UI for light-dismiss overlays, while the native dialog element handles focus-trapping modals. Scroll-Driven Animations with animation-timeline: scroll() and view() run on the compositor thread, replacing GSAP ScrollTrigger. View Transitions, customizable select with appearance: base-select, CSS scroll-state queries, field-sizing: content, and the upcoming if() function round out a platform shift that could cut 44-146 kB of JavaScript from typical SPAs.
A ranked comparison of web image formats from BMP and TIFF (both D/C tier for large file sizes and limited web use) through GIF (D tier — 256-color limit, poor transparency, large files) and PNG (C tier — lossless, full alpha channel, but large). JPEG applies lossy 8x8 block compression to achieve roughly 25x size reduction versus BMP with negligible visible quality loss, but stays C tier given modern alternatives. WebP, released by Google in 2010, delivers better compression than JPEG at equivalent quality while adding transparency and animation support — a single WebP can be 10x smaller than an equivalent PNG. AVIF (S tier), backed by the AV1 codec, achieves 20-30% better compression than WebP, adds wide color gamut and HDR support, and has 96% browser coverage; the recommended strategy is AVIF with a WebP fallback.
Kevin Powell shares two practical tips for writing cleaner CSS @keyframes. First, comma-separating shared keyframe stops (e.g. 25%, 75%) eliminates duplicate declarations and means a single value change updates both stops at once. Second, omitting the from (0%) and to (100%) keyframes when they aren't needed prevents glitchy animation starts on elements that already have a transform applied — for example, a bell icon pre-rotated via a lean-left or lean-right class. Combining the individual CSS properties rotate and translate alongside transform lets independent rotation and translation animations layer without conflict, enabling each element to animate from its own starting position rather than always snapping back to the origin.
The CSS light-dark() function, previously limited to color values, is being extended to accept image values as well. This eliminates the need for @media (prefers-color-scheme: dark) blocks to swap background images, masks, or logos — a single background-image: light-dark(url(light.png), url(dark.png)) declaration now handles it while also respecting local color-scheme overrides. Chrome 150 and Firefox 150 both ship support, while Safari has no support yet. Feature detection works via @supports (background-image: light-dark(none, none)). Arguments must be two colors or two images — mixing types is not allowed due to how the CSS parser resolves value types at parse time. A future CSS @function combined with color-scheme() will eventually extend this pattern to any arbitrary value type.
Build a Shimmer Skeleton That Never Goes Out of Sync
Traditional skeleton screens require a hand-crafted mirror component for every real component, with hardcoded widths, heights, and border radii that break whenever the real layout changes. This article walks through building a DOM-measurement approach: render the real component with mock data, hide text with color: transparent (not opacity or visibility), then use getBoundingClientRect() to measure each leaf element — img, h1-h6, p, span, button — relative to the container. getComputedStyle() captures each element's border-radius, with a 4px fallback for text nodes. A CSS @keyframes shimmer animation with background-size: 200% sweeps a semi-transparent gradient across each absolutely positioned block. In React, useLayoutEffect runs the measurement synchronously before the browser paints, preventing any flash of invisible content. Edge cases covered include zero-dimension elements, images without explicit sizes, SVG subtrees, and resize-during-load scenarios.
Accessible Text Color with the CSS contrast-color() Function
The CSS contrast-color() function accepts any valid color value and returns either black or white — whichever meets the higher contrast ratio against the input. This eliminates manual WCAG ratio checks, JavaScript calculations, and per-variant text color declarations in design systems. The browser's algorithm must conform to WCAG AA's 4.5:1 minimum for normal text; ties resolve to white. The function is a simplified MVP pulled from CSS Color Level 6 into Level 5, renamed from the richer color-contrast() to contrast-color() — it currently only returns black or white, not arbitrary candidate colors. It pairs naturally with color-mix() and style queries to produce tinted contrast variants, and works seamlessly with prefers-color-scheme for theme-aware accessible palettes.
Sonner's unstyled: true mode on toastOptions strips all default styles and hands full control to the developer. Each toast is an li element; understanding its flat DOM structure — div[data-icon], div[data-content], button[data-cancel], button[data-action] as direct siblings — is essential for correct flex layout. Per-variant styling uses the classNames keys success, error, and info, with !important required on border-l-* to override the base border shorthand. The loading state requires special handling: .sonner-loader defaults to position: absolute and must be reset to static. Animation speed is controlled via the --toast-animation-duration CSS custom property, and inline transition styles require !important overrides. Data attributes including data-type, data-expanded, data-front, and data-visible enable fine-grained CSS targeting without JavaScript.
Week 12 made a compelling case that native CSS is eroding the need for heavyweight JavaScript libraries. GitButler's "The Great CSS Expansion" catalogued how CSS Anchor Positioning replaces Floating UI and Popper.js, the Popover API and native dialog replace Radix/Headless UI, and Scroll-Driven Animations with animation-timeline: scroll() and view() replace GSAP ScrollTrigger — potentially cutting 44-146 kB of JavaScript from typical SPAs. Two new color functions extend the platform's design capabilities: light-dark() is being expanded beyond color values to accept images (Chrome 150, Firefox 150), eliminating @media prefers-color-scheme blocks for logo or background swaps; and contrast-color() automatically returns the higher-contrast black or white against any input color, removing manual WCAG ratio checks from design systems.
On the practical side, a deep-dive into shimmer skeleton screens demonstrated a DOM-measurement approach using getBoundingClientRect() and getComputedStyle() to generate always-in-sync skeletons without hand-crafted mirror components, using React's useLayoutEffect to prevent paint flashes. Sonner toast customization was explored via unstyled: true, revealing data attributes (data-type, data-expanded) as the key targeting mechanism. Kevin Powell shared @keyframes clarity tips around comma-separated stops and omitting unnecessary from/to keyframes to prevent glitchy animations on pre-transformed elements. Image format guidance crowned AVIF (S tier, 20-30% better than WebP, 96% browser coverage) with a WebP fallback as the recommended web image strategy.
Key Takeaways
CSS Anchor Positioning, the Popover API, native dialog, and Scroll-Driven Animations can collectively eliminate over 322 kB of minified JavaScript libraries (Floating UI, Popper.js, Radix, GSAP ScrollTrigger) from a typical SPA.
light-dark() now supports image values in Chrome 150 and Firefox 150, and contrast-color() returns WCAG AA-compliant black or white automatically — both remove whole categories of JavaScript from design systems.
AVIF is now the recommended primary web image format (20-30% better compression than WebP, 96% browser support), with WebP as fallback.
