(BUSAN.SASHIMI)
terminal
Weekly Digest // STYLING — Week 23-2026
paletteWeekly Report

CSS and Styling — 2026 Week 23

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 23-2026
TOOLING

VoidZero is Joining Cloudflare

Evan You's VoidZero — the company behind Vite, Vitest, Rolldown, and Oxc — is being acquired by Cloudflare. All projects remain open-source under the MIT license. Since 2023, the team built Rolldown (a Rust-based bundler now default in Vite 8), Oxlint (50–100x faster than ESLint with type-aware linting), Oxfmt (30x faster than Prettier), and Vite+. Cloudflare's deep investment in the Vite Environment API and existing plugin collaboration made the acquisition a natural fit. The team will continue leading all open-source projects while helping make Cloudflare a better deployment platform for Vite-based apps, with a growing focus on tooling for AI agents.

VoidZero is Joining Cloudflare
Read Articlearrow_forward
Video · ANIMATION

CSS Can Now Animate Between Pages

Cross-document View Transitions let multi-page websites animate between separate HTML pages using only CSS. The @view-transition rule with navigation: auto enables a default crossfade, while ::view-transition-group, ::view-transition-old, and ::view-transition-new pseudo-elements let you define custom keyframe animations such as slide-in and slide-out. Named transition groups (via view-transition-name) isolate specific elements — keeping a nav bar static while only the main content slides — and shared image transitions can animate an element from one page position to another. Accessibility best practice is to wrap the setup in prefers-reduced-motion: no-preference. Browser support currently covers Chrome, Edge, and Safari but not Firefox, so it should be treated as progressive enhancement.

AI_INFOGRAPHIC
CSS Can Now Animate Between Pages — infographicWATCH_VIDEOarrow_forward
Video · LAYOUT

Three CSS Patterns I Use in Every Project

Kevin Powell walks through three reusable CSS layout primitives: the Stack, the Prose, and the Pile. The Stack uses display: flex with flex-direction: column and a gap driven by an undefined --stack-gap custom property with a fallback, making it easy to override per-component. The Prose pattern applies a margin-block-start using the lobotomized owl selector (* + *) with em units so spacing scales with font size — mirroring Tailwind's prose plugin behavior. The Pile uses display: grid with grid-template-areas: pile and place-items: center to layer all children in the same cell, enabling text-over-image layouts and badge overlays without needing position: absolute, while still supporting z-index within the grid context.

AI_INFOGRAPHIC
Three CSS Patterns I Use in Every Project — infographicWATCH_VIDEOarrow_forward
Article · ANIMATIONREAD TIME: 4m

Going Full Circle on CSS Toggle Transitions

Christopher Kirk-Nielsen explores how to make an accordion chevron complete a full 360-degree rotation on close — rather than rewinding — using only CSS. His final approach combines a registered custom property (to hold the open state) with a step-end timing function and a negative transition-delay to suppress the unwanted snap-back transition. The technique works in Chromium and WebKit (Safari 18.6 tested) but fails in Firefox, which skips the closing transition entirely; a Firefox-specific fallback reverts to the standard rewind behavior. Two community solutions posted after publication work cross-browser: one uses a linear() easing trick to negate the closing easing, and another leverages the chevron's symmetry with a mirror transform instead.

READ_FULL_LOGarrow_forward
Article · CSS PROPERTIESREAD TIME: 10m

Lowering the Barrier to CSS @property Adoption

CSS @property has been Baseline for nearly two years, yet most codebases still rely on unregistered custom properties. This article explains why registering a property — declaring its syntax (e.g., angle or color), inherits, and initial-value — allows the browser to interpolate transitions on custom properties like --angle in a linear-gradient, something impossible with unregistered vars. The author introduces an experimental CLI tool, css-property-type-validator generate, that scans existing CSS files and produces a draft properties.css with conservative @property registrations as a reviewable first step. Key caveats covered: transition-behavior: allow-discrete does not enable smooth interpolation for unregistered properties, and initial-value must be computationally independent (0px rather than 0 for lengths).

READ_FULL_LOGarrow_forward
Article · NEWSLETTERREAD TIME: 5m

Smashing Newsletter Issue #561: New CSS Techniques

Smashing Magazine's 561st newsletter, sent to 176,289 subscribers, rounds up useful CSS techniques and new features. Highlights include: conditional form validation with :nth of selectors; sizes="auto" for responsive images (hero images still need explicit sizes); safe area insets for mobile notch and dynamic island layouts; font-variant-emoji for controlling color vs. monochromatic emoji rendering; container query typography systems; and Chrome 145's new column-height and column-wrap properties for multi-column layouts that wrap vertically instead of forcing horizontal scroll. CSS subgrid for inheriting parent grid tracks in CMS-driven layouts is also featured, alongside coverage of CSS Masonry comparisons.

READ_FULL_LOGarrow_forward
Article · COLORREAD TIME: 4m

Designing an Autogenerated Live Color Scale in CSS

Jared White demonstrates how to generate a complete 11-step color scale from a single --wll-brand-color CSS variable using the color-mix() function in the display-p3 color space, built for the Willamette theme for Bridgetown. The scale mixes the brand color with white (up to 90%) for lighter tones and with black (up to 80%) for darker tones, producing values from brand-05 to brand-95. The article compares srgb (oversaturated lighter tones), oklch (too gray and muddy), and display-p3 (perceptually correct lightening and darkening) to justify the color space choice. Limitations are honest: yellows go beige rather than bright, and manually designed palettes like Web Awesome still outperform autogeneration — but users can override individual stops with their own color-mix calls.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

The week's biggest styling news was the acquisition of VoidZero — Evan You's company behind Vite, Vitest, Rolldown, and Oxc — by Cloudflare. All projects remain MIT-licensed open source. Since 2023, the team shipped Rolldown (now the default bundler in Vite 8), Oxlint (50-100x faster than ESLint with type-aware linting), Oxfmt (30x faster than Prettier), and Vite+. Cloudflare's existing investment in the Vite Environment API made the fit natural, with the team continuing to lead all open-source projects while expanding Vite-based deployment tooling and AI agent tooling on Cloudflare's platform.

On the CSS front, cross-document View Transitions arrived with broad coverage: the @view-transition rule with navigation: auto enables default crossfades between separate HTML pages, while named transition groups via view-transition-name isolate elements for per-element animations like slide-in and slide-out. Support covers Chrome, Edge, and Safari but not Firefox, so progressive enhancement is recommended. Smashing Newsletter issue 561 catalogued several noteworthy CSS additions: Chrome 145's new column-height and column-wrap properties for multi-column vertical wrapping, container query typography systems, sizes="auto" for responsive images, font-variant-emoji for controlling color vs. monochromatic emoji, and safe area insets for notch and Dynamic Island layouts.

CSS @property received a practical adoption guide explaining how registering a property's syntax, inherits, and initial-value unlocks browser interpolation for transitions on custom properties like --angle in linear-gradient(). An experimental CLI tool, css-property-type-validator generate, scans existing CSS files and outputs a reviewable properties.css draft. A color-theming article demonstrated generating an 11-step scale from a single --wll-brand-color using color-mix() in the display-p3 color space, comparing sRGB and oklch trade-offs. Kevin Powell's layout primitives article detailed the Stack, Prose, and Pile patterns as reusable composition tools without position: absolute.

Key Takeaways
  • Cloudflare acquired VoidZero (Vite, Rolldown, Oxlint, Oxfmt) — all projects stay MIT open source, and Rolldown is already default in Vite 8 at 50-100x the lint speed of ESLint.
  • Cross-document View Transitions are now usable in Chrome, Edge, and Safari via @view-transition with navigation: auto — wrap in prefers-reduced-motion for accessibility and treat as progressive enhancement for Firefox.
  • CSS @property unlocks transition interpolation on custom properties; the css-property-type-validator generate CLI can auto-draft @property registrations from your existing CSS files.