What is it?
Modern CSS is a set of features that landed across all major browsers
between 2023 and 2026 — :has(), container queries, color-mix(),
view transitions, anchor positioning, scroll-driven animations.
Everything that used to need JavaScript is moving back into the
platform, faster and smaller.
Why it matters
Code that uses modern CSS reads as 2026, not 2018. It's also less code:
a JS-powered hover-style change is dozens of lines and a runtime cost;
a :has() selector is one line and free. Knowing what shipped recently
is what separates "I know CSS" from "I keep up with CSS."
What to learn
:has()parent / sibling selection — the actual game changer- Container queries:
@containerwithcontainer-type: inline-size color-mix()and oklch() for derived colors- View transitions API for cross-page animations
- Scroll-driven animations with
@keyframes+animation-timeline - Cascade layers (
@layer) for managing CSS at scale
Common pitfall
Writing JavaScript to do what :has() does. "When this card has a
selected child, change the parent style" used to need event listeners
and class toggling. Now it's .card:has(.is-selected) { ... } —
zero JS, zero hydration cost.
Resources
Primary (free):
- web.dev — Newly available CSS · docs
- MDN — :has() · docs
- Modern CSS Solutions — Stephanie Eckles · article
- State of CSS 2025 · article
Practice
Pick a JavaScript-driven UI behavior in a project (active-state toggling,
parent-aware styling, smooth scroll snapping). Replace it with modern
CSS — :has(), container queries, or scroll-snap. Measure: count lines
of JS removed and check the result still works. Done when at least one
"that needed JS" pattern is now zero JS.
Outcomes
- Use
:has()to style a parent based on its descendants. - Build a component that adapts to its container, not the viewport.
- Generate a tint or shade with
color-mix()from a single base color. - Identify which CSS features are baseline-available in 2026.