Modern CSS Techniques You Should Know in 2026

CSS in 2026 is remarkably powerful. Features that once required JavaScript or complex workarounds are now native to the language. Let's look at the techniques that have become essential.

Container Queries

Container queries let you style elements based on their parent container's size rather than the viewport. This is a game-changer for component-based design.

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

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Cascade Layers

The @layer rule gives you explicit control over the cascade, making it easier to manage specificity across your stylesheets.

@layer base, components, utilities;

@layer base {
  h1 { font-size: 2rem; }
}

@layer components {
  .hero h1 { font-size: 3rem; }
}

The :has() Selector

Often called the "parent selector," :has() lets you style elements based on their children or siblings.

/* Style a card differently when it contains an image */
.card:has(img) {
  grid-template-rows: auto 1fr;
}

/* Highlight a form group with an invalid input */
.form-group:has(:invalid) {
  border-color: red;
}

Subgrid

Subgrid allows nested grids to align with their parent grid tracks, solving a long-standing layout challenge.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

View Transitions API

Smooth page transitions without JavaScript frameworks. The View Transitions API lets you animate between DOM states with minimal code.

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

Wrapping Up

The CSS landscape has matured significantly. These features reduce our dependence on JavaScript for layout and presentation logic, leading to simpler, more performant applications. If you haven't explored these yet, now is the time.