Modern CSS techniques, layout tricks, animations, and design system patterns for the modern web.
A guide to the four CSS-native techniques replacing JavaScript animation libraries: view transitions, scroll-driven animation, @starting-style, and @property.
A working map of :has(), cascade layers, @scope and @when/@else, and how they change the way you write CSS in 2026.
Explains how to use the CSS Motion Path API to move elements along complex vector paths without JavaScript. Covers responsive path scaling and controlling element rotation along the curve.
Explains how to use scroll-padding and scroll-margin to prevent anchor links from scrolling underneath fixed or sticky headers. Replaces old JavaScript offset calculations with native CSS.
A guide to the CSS layout features that matter now: container queries, subgrid, masonry, anchor positioning, and logical properties.
attr(data-color color, #333) feeding straight into background-color sounds like it already ships, but as of early 2026 it's spec-only. Here's what attr() actually does today, and what's coming.
height: auto was never a number the browser could interpolate toward, which is exactly why it never animated at all. These two features finally give the engine something concrete to target.
Three separate min-resolution media query blocks plus an @supports check for WebP used to be needed just to keep background images in sync. image-set() resolves all of that on its own now.
Grid and Flexbox both expect their items to be direct children of the container, but semantic HTML forces wrapper elements in between. display: contents removes the wrapper's box, not its markup.
Rounding a fluid width to the nearest multiple of 8px used to require a resize listener writing values back to a custom property. These math functions run natively at layout time instead.