5 Modern CSS Features You Should Be Using

CSS has evolved faster in the past two years than in the previous decade. If you learned CSS before 2022, you’re probably still writing code the hard way for things that now have elegant native solutions.

1. Container Queries Are Here

You’ve been using media queries to respond to viewport size. But what if a component needs to respond to its container’s size instead?

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

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

This changes everything for component libraries. A card component can now adapt whether it’s in a sidebar, main content, or full-width hero—without knowing anything about the page layout.

2. The :has() Selector (Finally)

For years, we wanted a “parent selector.” Now we have something even better:

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

/* Hide the label when checkbox is checked */
label:has(input:checked) {
  text-decoration: line-through;
}

/* Add spacing only to cards that have images */
.card:has(img) {
  padding: 0;
}

No JavaScript required. No class toggling. Just CSS.

3. Subgrid for Aligned Layouts

Ever tried to align items across multiple grid children? Subgrid solves this elegantly:

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

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* header, content, footer */
}

Now all your card headers, content areas, and footers align perfectly across the row—regardless of content length.

4. Native CSS Nesting

If you’ve been using Sass just for nesting, you might not need it anymore:

.button {
  background: blue;

  &:hover {
    background: darkblue;
  }

  &.primary {
    background: green;
  }

  & span {
    font-weight: bold;
  }
}

Native CSS. No preprocessor. Works in all modern browsers.

5. color-mix() for Dynamic Colors

Need a hover state that’s 20% darker? A disabled state that’s 50% transparent? No more hex math:

.button {
  background: var(--brand-color);
}

.button:hover {
  background: color-mix(in srgb, var(--brand-color), black 20%);
}

.button:disabled {
  background: color-mix(in srgb, var(--brand-color), transparent 50%);
}

This works with any color format and produces predictable results.

Keep Learning

These features are just the beginning. Modern CSS includes logical properties, cascade layers, individual transform properties, and more.

Our book 100 Coding for Website Design Tips covers these and 95 other practical techniques—one concept per page, each with code you can use immediately.

See it on Amazon →