New(ish) CSS properties worth adopting

Here are some new(ish) CSS properties that are seriously worth adopting. We use them in production, suggest you also try them out if not already. Hopefully there is a couple you haven't tried yet.

Balanced headlines without manual line breaks

h1 { text-wrap: balance; }

Stops headlines from having one word on the last line. Browser redistributes text automatically. Works across modern browsers.

Tailwind: text-balance

Responsive components based on container size

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

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

Media queries check viewport size. Container queries check the parent container's size. You mark a parent element as a container with container-type: inline-size, then child elements can respond to that container's width instead of the viewport. Same card component can live in a narrow sidebar or wide main content area and adapt automatically. Makes components genuinely reusable across different layouts.

Tailwind: Parent: @container, Child: @md:grid-cols-2

Parent selectors

.card:has(img) { padding: 0; }
form:has(:invalid) { border: 2px solid red; }

Style an element based on its children. Finally. No more adding classes to parents with JavaScript. You can check if a card has an image, if a form has invalid fields, or if a section has any content at all. Game-changing for component variants.

Tailwind: has-[:invalid]:border-2 has-[:invalid]:border-red-500

Nested grids that align properly

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

.child {
  display: grid;
  grid-template-columns: subgrid;
}

Lets nested grids inherit parent grid tracks. Finally solves alignment across card components without hacky workarounds. Your nested card's content can align perfectly with its siblings content, even though they're in different DOM levels.

Tailwind: grid-cols-subgrid

Native CSS nesting

.card {
  color: blue;
  
  &:hover { color: red; }
  
  .title { font-weight: bold; }
}

Write Sass-style nesting in vanilla CSS. No preprocessor needed. Just became baseline stable in 2024. You can nest pseudo-classes, child selectors, everything. Makes CSS way more readable when building out components.

Tailwind: N/A

Mix colours in CSS

.button {
  background: color-mix(in srgb, blue 70%, white);
}

Blend colours directly in CSS without Sass functions or JavaScript. Handy when creating hover states, disabled states, or theme variations on the fly. The in srgb part tells it which colour space to use.

Tailwind: N/A (use arbitrary values like bg-[color-mix(in_srgb,blue_70%,white)])

Separate transform properties

.box {
  scale: 1.5;
  rotate: 45deg;
  translate: 100px 50px;
}

Instead of transform: scale(1.5) rotate(45deg) translate(100px, 50px), you can set each transform property individually. Makes animations cleaner and overriding specific transforms much easier.

Tailwind: scale-150 translate-x-[100px] translate-y-[50px]

All of these are production-ready. Browser support has been solid across Chrome, Safari, and Firefox for at least 1 year now.