Modern CSS Features You Should Be Using in 2026

CSS isn't the same language it was a few years ago. Modern CSS has become incredibly powerful, reducing our reliance on JavaScript and making responsive design more intuitive than ever.

Container Queries: The Game Changer

For years, we've been stuck with media queries based on viewport size. Container queries finally let us style components based on their parent container's size.

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

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

This is huge for component-based architecture. Your card component can adapt to its container, whether it's in a narrow sidebar or a wide main area.

Cascade Layers

Organize your CSS with explicit layering:

@layer reset, base, components, utilities;

@layer components {
  .button {
    padding: 1rem 2rem;
    border-radius: 0.5rem;
  }
}

Layers give you fine-grained control over specificity without resorting to !important.

:has() Selector - The Parent Selector We Always Wanted

/* Style a card differently if it has an image */
.card:has(img) {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

/* Style form when an input is invalid */
form:has(input:invalid) {
  border-color: red;
}

The :has() selector is effectively a parent selector, opening up styling possibilities that previously required JavaScript.

Subgrid

Finally, nested grids that align with their parent:

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

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

CSS Nesting

Write nested selectors without preprocessors:

.card {
  padding: 1rem;
  
  & .title {
    font-size: 1.5rem;
  }
  
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

New Color Spaces

Work with modern color spaces like oklch and oklab:

.element {
  background: oklch(70% 0.15 280);
}

These provide more perceptually uniform colors and better gradients.

Browser Support

Most of these features have excellent browser support as of 2026. Always check Can I Use and provide fallbacks when needed.

Start Using Them Today

Modern CSS features make your code more maintainable, performant, and powerful. There's never been a better time to be writing CSS.

Ready to modernize your styles? Contact us to discuss your project.