Layout
Container Queries
Components that respond to the size of their container rather than the viewport, enabling truly modular, context-aware design systems.
Feature Gallery
Color
oklch() Color
A perceptually uniform color space where equal numeric steps produce equal perceived brightness changes, making programmatic color manipulation predictable.
Animation
Scroll-Driven Animations
Tie animation progress directly to scroll position using the
animation-timeline property, with no JavaScript event listeners required.
Typography
text-wrap: balance
Automatically distributes text across lines to eliminate awkward single-word orphans in headings and short paragraphs.
Layout
Subgrid
Lets nested elements participate in a parent grid's tracks, solving the long-standing problem of aligning content deep inside card components.
Color
color-mix()
Mix two colors in any color space directly in CSS, enabling tints, shades, and blends that previously required a preprocessor or JavaScript.
Animation
View Transitions API
Animate between DOM states or page navigations with a snapshot-based cross-fade that the browser handles automatically.
Typography
Variable Fonts
A single font file that exposes adjustable axes like weight, width, and slant, reducing HTTP requests while expanding typographic control.
Layout
Cascade Layers
Explicit layers of specificity that let you structure your CSS so utility classes and overrides no longer require specificity wars.
Color
light-dark()
A CSS function that returns one of two values depending on the current color scheme, collapsing what used to require two separate media query blocks.
Animation
Web Animations API
A JavaScript interface for creating and controlling animations with the same performance characteristics as CSS animations, plus programmatic playback control.
Typography
font-size-adjust
Normalizes the perceived size of fallback fonts so text remains consistently readable during the brief window before a web font loads.