CSS Wrapped 2024
by Roland
Introduction
2024 pushed CSS forward in a meaningful way.
Not with flashy one-off features, but with improvements that make everyday work simpler — layouts, responsiveness, and component design all got easier to reason about.
A lot of that progress comes from the work of the Chrome DevRel team, including Adam Argyle, Bramus, Rachel Andrew, Barry Pollard, and Una Kravets.
The features that defined 2024
Subgrid finally delivers
Subgrid removes one of the biggest pain points in Grid.
Child elements can now align with parent tracks without hacks or duplication. Layouts become more consistent, especially in complex components.
Anchor positioning changes how we place UI
Positioning elements relative to other elements — not just the viewport — unlocks a lot.
Tooltips, popovers, and overlays become easier to build. Less JavaScript, more predictable behavior.
Container queries grow up
Container queries were already useful. Now they’re more flexible.
With style queries, components can respond not just to size, but also to context. That makes design systems more adaptable without adding complexity.
Color gets more precise
New color spaces like lch and lab, combined with color-mix functions, give better control over contrast and consistency.
Designing accessible color systems becomes easier and more predictable.
Scoped styles reduce conflicts
Scoping brings styles closer to where they’re used.
Less leakage, fewer naming conflicts, and more confidence when working in larger codebases.
CSS nesting becomes practical
Nesting is no longer just a preprocessor feature.
The syntax is clearer, more consistent, and easier to use without introducing unnecessary complexity.
Why this matters
These changes aren’t isolated.
They work together to reduce friction:
- fewer layout hacks
- less JavaScript for UI behavior
- more predictable components
- better defaults for accessibility
CSS is becoming more capable, but also easier to reason about.
Explore more
Want to go deeper? Check out the official overview from the Chrome team: https://chrome.dev/css-wrapped-2024/
Closing thoughts
2024 didn’t reinvent CSS. It refined it.
Many long-standing problems now have native solutions. Things that used to require workarounds are becoming straightforward.
That’s where real progress happens — not in new APIs alone, but in making the platform easier to use, one step at a time.