CSS continues to evolve at a remarkable pace, introducing features that solve problems we once needed complex JavaScript workarounds for. Let’s explore the techniques shaping modern web development.
Container Queries
Container queries have fundamentally changed responsive design. Instead of relying solely on viewport dimensions, components can now adapt based on their parent container’s size. This makes truly reusable components possible — a card component that responds to the space it occupies rather than the screen width.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
}
}The :has() Selector
Often called the “parent selector,” :has() enables styles that depend on descendant or sibling state. Need to style a form group differently when it contains an invalid input? :has() makes this trivial without JavaScript intervention.
Cascade Layers
@layer declarations give developers explicit control over the cascade, solving specificity wars that have plagued stylesheets for decades. Organize your styles into reset, base, components, and utility layers to maintain predictable styling outcomes regardless of source order.
View Transitions
The View Transitions API brings native page transition animations to multi-page applications. Combined with Astro’s view transitions integration, creating smooth, app-like navigation experiences requires minimal code and delivers a polished feel.
Nesting
Native CSS nesting eliminates the need for preprocessors in many projects. Write styles that mirror your HTML structure without reaching for Sass or Less, keeping your toolchain leaner.