CSS New Features You Should Know in 2024

Nesting

Enhance the readability of your code and reduce the repetition of your selectors to save some kilobytes with the new nesting syntax. With this, you can nest children and media queries inside one parent selector.

.parent {
  color: black;
  &:hover {
    color: blue;
  }
}

The & symbol is called a nesting selector; in this case, it acts as a placeholder for .parent.

:has() pseudo-class

The has selector allows you to select an element if one of the relative selectors in the list is matched, making it easier to select elements and dynamically style them based on other elements.

h2:has(+ p) {
  /* this will select every h2 that has a sibling paragraph */
}

@starting-style

The @starting-style rule lets you define starting styles for animations and transitions on elements, making it possible to animate them from the first appearance.

.todo {
  @starting-style {
    opacity: 0;
    scale: 0;
  }
}

@scope

With the @scope rule, you won’t have to worry about the conflict of your CSS classes. You can select specific elements inside a subtree without writing complex specificity selectors.

There are two ways of writing scoped styles, whether by using @scope inside your CSS with scope root and optional scope limit selectors

@scope (.card) to (aside) {
  rulesets
}

or as an inline style inside your HTML element.

<article>
  <style>
    @scope {
      rulesets
    }
  </style>
</article>

color-mix()

You can mix two colors in any color space with the help of the color-mix function. With this function, you can easily create color palettes from your primary color.

color-mix(in oklab, var(--primary), black);
color-mix(in srgb, #f00 20%, white);

Trigonometric functions

Introducing the trigonometric sin(), cos(), tan(), asin(), acos(), atan(), and atan2() to the family of CSS math fucntions. with these, you can create beautiful animations and User Interfaces much easier and more precise without relying on javascript.

div {
  translate: calc(cos(var(--angle)) * var(--radius))
             calc(sin(var(--angle)) * var(--radius))
}

Container queries

Using the viewport to make your components responsive has some limitations. Now, by using the container queries, you can make your components change style dynamically based on the parent’s size.

@container (min-width: 700px) {
  .card {
    flex-direction: column;
  }
}

scroll-driven animations

Now, you can create scroll-based animations without JavaScript using the animation-timeline property with the scroll() and view() functions to define custom timelines for your keyframes.

• scroll() is based on the position of the scroll range on a scrollable element.
• view() is based on the visibility of an element.

div {
  animation-timeline: view();
  animation: appear alternate;
}
@keyframes appear {
  from {scale: 0}
  to {scale: 1}
}

You can also control the range of the timeline with the animation-range property.

Conclusion

These are just a few of what CSS brings to us to simplify the styling process, and I think you should start using them if you are not already.