Nesting 🪺

One of the remaining pain points of CSS is the repeating of class selectors. Consider the following example:

.layout .title {
  /* Styles for .title elements inside a .layout element */
}

.layout p {
  /* Styles for p elements inside a .layout element */
}

If we only want the rules to apply to elements with the .layout class, you have to repeat it as a prefix to every class selectors. This quickly turns into a chore.

With the new CSS Nesting syntax, we can rewrite the example as follows:

.layout {
  .title {
    /* Styles for .title elements inside a .layout element */
  }

  p {
    /* Styles for p elements inside a .layout element */
  }
}

Does it look familiar? You might have used preprocessors such as Sass and Less. These «supersets» of CSS offer pretty much the same syntax, but in return, you have to run your code through an extra build step.

Well, nesting is finally getting native support in CSS! As of December, the specification is completed in all major browsers with the exception of Safari, being merely a Technology Preview away from release. So if you haven't gotten rid of Sass yet, now's your chance!

To learn the details of CSS nesting, read more on MDN.

Has selector ⬇️

With CSS, it's always been trivial to select elements within another element. The main p selector will select all paragraphs within the main element, so we may style the paragraphs as desired. This is called a «children selector», since the styled paragraphs are children of main.

Suppose we want to reverse this rule. Instead of styling paragraphs inside of main, we want to style main elements that contain a paragraph. This can be called a «parent selector», since we're targeting main elements if they're parents of a paragraph. Previously, this has not been trivial without JavaScript.

The :has() pseudo class selector is meant to fill this role, and since 19th December, it's available in all major browsers!

Here's how to accomplish the previously «impossible» bit of CSS:

main:has(p) {
  /* Style main elements that contains a paragraph */
}

Balanced Text 🧘

When using a centered heading, is there anything worse than having just one single word stuck on the second line? text-wrap: balance is a new CSS property that aims to solve this annoying issue. When using balanced text wrapping, the browser will count the number of characters on every line of text and make sure each line have approximately the same width.

text-wrap: balance is implemented in Chrome and the latest version of Firefox, but is not yet ready in Safari. Still, what's stopping you from using it today? Unsupported browsers will merely ignore this CSS rule, effectively implementing progressive enhancement.

Can I use these features?

These are just some of the CSS additions coming up in 2024. Head over to CanIuse.com for more details on browser compatibility, or look for Mozilla's new compatibility badges if you're still reluctant about using a particular specification.

If you want to try experimental features in a production environment, you can also use the @supports at-rule to check for compatibility on the client itself. Just remember to keep a fallback implementation for unsupported browsers 🚀