Modern CSS Techniques for Better UX

CSS has evolved rapidly in the last few years. We now have tools that were once considered impossible or required JavaScript.

Container Queries

Container queries allow us to style elements based on the size of their parent container rather than the viewport. This is a game-changer for component-driven design.

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

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

The :has() Selector

Often called the “parent selector,” :has() allows us to style an element based on its children or their state.

/* Style a card if it contains an image */
.card:has(img) {
  padding: 0;
}

Fluid Typography

Using clamp() for typography ensures that our text scales smoothly between different screen sizes without needing dozens of media queries.

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

These techniques help us build more resilient and performant interfaces with less code.