The Evolution of CSS: What's New in 2026

CSS gained more capability in the last few years than in the decade before. Features that once required JavaScript or preprocessors now work in Chrome, Edge, Safari and Firefox. Here are the ones worth using in production today, with examples.

Container queries

Media queries respond to the viewport. Container queries respond to the size of a parent element, so a card component adapts to the space it sits in, whether that is a sidebar or a wide grid.

.card-wrap { container-type: inline-size; }

.card { display: grid; gap: 1rem; }

@container (min-width: 480px) {
  .card { grid-template-columns: 160px 1fr; }
}

Components become portable. You no longer need a modifier class for each placement.

The :has() selector

The :has() pseudo-class selects an element based on its children or following siblings. It acts as a long-awaited parent selector.

/* Style a form group when its input is invalid */
.field:has(input:user-invalid) { border-color: crimson; }

/* Change a card layout when it contains an image */
.card:has(img) { grid-template-columns: 1fr 2fr; }

Pair it with :user-invalid, which flags a field only after the user has interacted with it.

Native nesting

You can nest rules in CSS, as you did in Sass:

.nav {
  display: flex;
  a {
    padding: 0.5rem 1rem;
    &:hover { background: #eef; }
  }
}

All major browsers support it. Many projects can drop Sass for this alone, though Sass remains useful for loops and mixins.

Cascade layers

Specificity fights are a common source of !important. The @layer rule lets you declare the order in which groups of styles win, regardless of selector weight.

@layer reset, base, components, utilities;

Put third-party CSS in a low layer and your own overrides in a higher one. Later layers beat earlier layers, so you stop writing selectors like .page .card .title to beat a library.

Modern layout and sizing

• Subgrid lets nested elements align to the parent grid's tracks, so card titles and buttons line up across a row.
• Logical properties such as margin-inline and padding-block support right-to-left languages with no extra code.
• Viewport units dvh, svh and lvh fix the mobile address bar problem that broke 100vh.
• The clamp() function creates fluid type and spacing: font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem).
• The aspect-ratio property replaces the padding-top hack for responsive media.

Color

The oklch() color space gives perceptually even lightness, which makes generating palettes and accessible contrast more predictable. The color-mix() function blends colors in CSS, and the light-dark() function sets a value for each color scheme in one declaration.

View transitions and scroll-driven animation

The View Transitions API animates between page states, including full navigations in supporting browsers, with a few lines of CSS. Scroll-driven animations tie an animation's progress to scroll position without a JavaScript scroll listener, which keeps the main thread free. Chrome and Edge support them; Safari and Firefox support is still arriving, so treat both as progressive enhancement and test the fallback.

Adopt features

1. Check support on caniuse.com against your analytics browser mix.
2. Wrap newer features in @supports so older browsers get a working layout.
3. Use a tool such as Lightning CSS or PostCSS for prefixing and syntax lowering.
4. Replace JavaScript layout logic and utility-class workarounds one component at a time.

Common questions

Can I use these features if some visitors have older browsers?

Check your analytics for the browsers your visitors actually use. Container queries, :has(), nesting and cascade layers have been available in all evergreen browsers since 2023, so they cover the large majority of traffic. For stragglers, write a simple base layout first and layer the modern rules on top inside @supports blocks.

Do I still need Sass or Tailwind?

It depends on your workflow. Native nesting and custom properties remove two common reasons for Sass, though Sass mixins and functions still help in large design systems. Tailwind CSS speeds up building consistent interfaces and works alongside all the features above; version 4 is built around native cascade layers and CSS variables.

How do custom properties differ from preprocessor variables?

Custom properties live in the browser, so they cascade, respond to media queries and container queries, and change at runtime with JavaScript. Sass variables compile away before the page loads. That makes custom properties the right tool for theming and dark mode.

Is CSS-in-JS still a good idea?

Runtime CSS-in-JS libraries add JavaScript work during rendering, which hurts performance with server components. Zero-runtime options, CSS Modules and utility-first CSS avoid that cost. For new projects, most teams now pick one of the latter.

How do I learn these features fast?

The MDN documentation and web.dev Learn CSS course cover each feature with live examples. Refactor one component at a time, for example turning a media-query card into a container-query card, and compare the code size before and after.

Modern CSS cuts code size and maintenance cost on every project we deliver. If your stylesheet has grown into a tangle of overrides, our front-end team can refactor it. Request a code review.