Modern CSS Features Guide

CSS has evolved tremendously in recent years. The features we once dreamed of are now reality, making our stylesheets more powerful and maintainable.

Container Queries

Container queries are arguably the most significant CSS feature added in years. Unlike media queries that respond to viewport size, container queries respond to a parent container's size.

css

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

@container (max-width: 400px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

This enables truly component-responsive design, where components adapt to their available space rather than the overall viewport.

Cascade Layers (@layer)

Cascade layers give us control over the CSS cascade, letting us explicitly define which styles take precedence. This is revolutionary for managing specificity conflicts.

css

@layer reset, base, components, utilities;

@layer components {
  .button {
    /* Low priority, even with !important */
  }
}

@layer utilities {
  .btn-primary {
    /* Always overrides components */
  }
}

CSS Nesting

Finally, native CSS nesting is here. No more preprocessors needed for nested selectors.

css

.card {
  padding: 1rem;

  &:hover {
    transform: translateY(-2px);
  }

  & .title {
    font-size: 1.25rem;
  }
}

Native nesting works with the @nest rule too, offering flexibility in how you structure your nested selectors.

:has() Selector

The :has() pseudo-class allows us to select elements based on their descendants. This opens up possibilities previously requiring JavaScript.

css

/* Style cards that contain images */
.card:has(.image) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Style forms with invalid inputs */
form:has(:invalid) {
  border-color: red;
}

Subgrid

Subgrid allows nested grids to inherit the track sizing of their parent grid, solving long-standing layout problems.

css

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

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

Custom Properties (CSS Variables) Updates

CSS variables now support @property for better type safety and animation capabilities.

css

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.rotating-gradient {
  background: linear-gradient(var(--gradient-angle), blue, pink);
  animation: rotate 3s infinite linear;
}

Accent Color

The accent-color property lets you customize form controls without complex styling overrides.

css

input[type="checkbox"] {
  accent-color: #ff6b6b;
}

Trigonometric Functions

CSS now includes sin(), cos(), tan(), and other math functions for creating complex geometric layouts.

css

.rotating-card {
  transform: rotate(var(--angle));
  --angle: calc(sin(var(--time)) * 45deg);
}

Color Functions

New color functions like color-mix() and relative color syntax make color manipulation easier.

css

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

.button {
  --primary: #3b82f6;
  background: hsl(from var(--primary) h s calc(l + 10%));
}

Browser Support

Modern features have excellent support in Chrome, Edge, and Safari. Firefox is catching up quickly. Always check Can I Use for current support levels and provide fallbacks when necessary.

Performance Considerations

Container queries and :has() can impact performance. Profile your layouts if you notice jank. Use containment properties to limit style recalculation scope.

Conclusion

These modern CSS features represent a paradigm shift in how we approach styling. Container queries enable truly responsive components. Cascade layers tame specificity wars. Native nesting eliminates build tool dependencies. Start using these features today with progressive enhancement strategies.