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.
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.
Testing three separate conditions today means three conditional blocks stitched together, or a JavaScript fallback filling the gaps. @when/@else isn't shipping yet, but it's worth planning for.
A styled checkbox that renders as a completely empty box is almost always a Windows contrast theme your CSS never accounted for. Here's how to detect that mode and restore visibility.
Faking custom bullets with generated content strips list position entirely from screen reader announcements. @counter-style plugs into list-style-type without losing that native semantics.