--- title: "3 Upcoming CSS Features" url: "https://www.bekk.christmas/post/2023/22/3-upcoming-css-features" authors: ["Kjetil Svalestuen"] published: "2023-12-22" updated: "2024-11-27T12:19:25Z" language: "en-US" type: "article" tags: ["CSS"] keywords: ["CSS", "Feature"] --- # 3 Upcoming CSS Features This is a follow-up on a previous post about [3 New Additions to CSS in 2023](https://www.bekk.christmas/post/2023/11/3-new-additions-to-css-in-2023). Last time, I discussed a set of new CSS features that have recently become widely available in modern browsers. Today, let's delve into the most anticipated changes that are expected to release some time during 2024. ## In short CSS is getting three notable improvements: native nesting to reduce repeated selectors, the :has() pseudo-class for selecting elements based on what they contain, and text-wrap: balance for more even heading line breaks. Together, these features make common styling patterns simpler while still allowing progressive enhancement in browsers that do not yet support them. - **For:** Frontend developers working with CSS - **Good to know beforehand:** Basic familiarity with CSS selectors and properties _AI-generated_ ## Nesting 🪺 One of the remaining pain points of CSS is the repeating of class selectors. Consider the following example: ```css .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: ```css .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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting). ## 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](https://caniuse.com/css-has)! Here's how to accomplish the previously «impossible» bit of CSS: ```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](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). ## Can I use these features? These are just some of the CSS additions coming up in 2024. Head over to [CanIuse.com](https://caniuse.com/) for more details on browser compatibility, or look for Mozilla's new [compatibility badges](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) to check for compatibility on the client itself. Just remember to keep a fallback implementation for unsupported browsers 🚀 ## Relevant resources recommended by the author - [3 New Additions to CSS in 2023](https://www.bekk.christmas/post/2023/11/3-new-additions-to-css-in-2023)