CSS New Features: The Most Exciting Additions

CSS has evolved more in the past three years than in the previous decade. Features we've been requesting for years—some for over a decade—have finally landed in all major browsers. These additions fundamentally change how we write stylesheets.

This article covers the most significant CSS features, ranked by their practical impact on everyday development.

Container Queries

If there's one feature that changes everything, it's container queries. For years, we've relied on viewport-based media queries to create responsive designs. But components don't care about the viewport—they care about their container.

Container queries let elements respond to their parent's size rather than the screen:

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

.card {
  display: grid;
  grid-template-columns: 1fr;
}

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

This enables truly reusable components. A card component adapts whether it's in a narrow sidebar or a wide content area—without JavaScript and without knowing where it's placed.

Container queries also support style queries, letting you respond to custom property values:

@container style(--theme: dark) {
  .card {
    background: #1a1a1a;
  }
}

Native CSS Nesting

After years of relying on preprocessors like Sass or Less, CSS now supports nesting natively:

.card {
  padding: 1rem;
  background: white;

  .title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

This reduces repetition, improves readability, and keeps related styles grouped together. For many projects, native nesting eliminates the need for a CSS preprocessor entirely.

The :has() Selector

Often called the "parent selector," :has() is far more powerful than that name suggests. It lets you style elements based on their descendants, siblings, or state:

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

/* Style labels when their input is invalid */
label:has(+ input:invalid) {
  color: red;
}

/* Style the body when a modal is open */
body:has(.modal.open) {
  overflow: hidden;
}

This selector enables patterns that previously required JavaScript. Form validation styling, conditional layouts, and state-based styling all become pure CSS.

Subgrid

CSS Grid revolutionized layouts, but nested grids couldn't align with their parent's tracks. Subgrid fixes this:

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

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

Child elements now align perfectly with the parent grid. This is invaluable for card layouts where titles, content, and footers should align across items regardless of content length.

View Transitions API

Page transitions and state changes can now animate smoothly with minimal code:

@view-transition {
  navigation: auto;
}

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

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

For more control, you can trigger transitions programmatically:

document.startViewTransition(() => {
  updateDOM();
});

This enables native-feeling transitions between pages or states without heavy animation libraries.

Scroll-Driven Animations

Animations can now respond to scroll position without JavaScript:

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

Elements fade in as they enter the viewport, parallax effects become trivial, and progress indicators can track scroll position—all in pure CSS.

The color-mix() Function

Creating color variations no longer requires preprocessors or custom properties with separate HSL values:

:root {
  --primary: #3b82f6;
  --primary-light: color-mix(in srgb, var(--primary), white 30%);
  --primary-dark: color-mix(in srgb, var(--primary), black 30%);
}

You can also create semi-transparent versions:

.overlay {
  background: color-mix(in srgb, var(--primary) 50%, transparent);
}

Individual Transform Properties

Transforms no longer require overwriting the entire transform property:

.element {
  rotate: 15deg;
  scale: 1.2;
  translate: 10px 20px;
}

.element:hover {
  scale: 1.3; /* Only changes scale, preserves rotate and translate */
}

This makes animations simpler and avoids specificity issues when different states modify different transforms.

The @layer Rule

Cascade layers give you explicit control over specificity:

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; box-sizing: border-box; }
}

@layer utilities {
  .hidden { display: none; }
}

Styles in later layers override earlier ones regardless of selector specificity. This solves many CSS architecture challenges and makes third-party style integration predictable.

Logical Properties Are Now Standard

Logical properties replace physical directions with flow-relative ones, essential for internationalization:

.card {
  margin-inline: auto;
  padding-block: 1rem;
  border-inline-start: 3px solid blue;
}

These properties automatically adapt for right-to-left languages without additional code.

Conclusion

These features represent a maturation of CSS as a language. Container queries and :has() reduce our dependence on JavaScript for layout and styling logic. Native nesting and cascade layers improve code organization. Scroll-driven animations and view transitions add polish without external libraries.

The best part: all these features work in modern browsers today. If you haven't explored them yet, start with container queries and :has()—they'll likely have the biggest impact on how you write CSS.