From container queries to scroll-driven animations — CSS features that are production-ready and worth adopting today.
CSS Has Evolved
If you last checked CSS seriously in 2022, you have missed a lot. Browser support has caught up on features that change how we build layouts, animations, and responsive designs.
1. Container Queries
Instead of checking the viewport width, container queries let you style components based on their parent container size. This makes components truly reusable across different page layouts.
2. CSS Nesting
Native nesting is here — no preprocessor needed. You can nest selectors just like Sass, directly in vanilla CSS. All major browsers support it.
3. The :has() Selector
The "parent selector" everyone wanted for years. Select a parent based on what it contains. For example, style a card differently when it has an image inside.
4. Scroll-Driven Animations
Tie CSS animations to scroll position without JavaScript. Create parallax effects, progress bars, and reveal animations purely in CSS.
5. View Transitions API
Smooth page transitions in multi-page applications. Add a few lines of CSS and pages animate between each other like a native app.
6. Subgrid
Child elements can participate in their parent grid. No more alignment hacks — cards in a row can share the same column widths for headings, content, and footers.
7. Color Spaces (oklch, oklab)
Better color manipulation. oklch gives you perceptually uniform colors — adjusting lightness actually looks linear to human eyes, unlike HSL.
8. Anchor Positioning
Position elements relative to other elements without JavaScript. Tooltips, popovers, and dropdowns become CSS-only.
9. @layer
Control CSS specificity with explicit cascade layers. Third-party styles never override your custom styles accidentally.
10. Popover API with CSS
The popover attribute plus CSS styling replaces most JavaScript-based tooltip and modal libraries. Built-in focus trapping and backdrop support.
Adoption Strategy
Do not try to use all of these at once. Pick one or two that solve a real problem in your current project and start there. Container queries and :has() are the highest-impact for most codebases.