What’s Coming to CSS in 2023-2024?

It’s already become clear that CSS has evolved beyond its early role as a basic tool for styling websites. Today, it's a multi-functional language that works closely with JavaScript and influences everything from webpage performance to accessibility. Innovations like Flexbox, Grid, and native variables have significantly expanded its capabilities, and these are just the beginning.

The updates coming in 2023 can be even more impressive. Most likely, they will have a huge impact on how we design, develop, and experience the web. Beyond the developer’s cubicle, these changes mean faster, more accessible websites, which translates to a better user experience for everyone. 

In the coming sections, we’ll explore the specifics: which new features we are getting and how they will shift the way we think about web development.

Current Issues and How They’re Being Solved

Despite the rapid development of the area, there are still a few things that might be considered problematic. However, here come new ways to make them irrelevant: now and in the future to come. 

Aspect Ratio

For example, native support for aspect ratios is a significant upgrade, to say the least. Previously, maintaining consistent aspect ratios often involved inelegant workarounds like padding hacks, which, while functional, added unnecessary complexity to the codebase. The introduction of the “aspect-ratio” property now allows developers to define this directly, and not just streamlining the code itself but also ensuring more predictable behavior across different screen sizes. This native support is a boon for responsive design and is likely to cut down both development time and testing.

Viewport Size

One of the longstanding issues in CSS has been the inconsistency of viewport units (“vh,” “vw,” etc.) across different browsers and devices. Dynamic viewport units in CSS are here to solve this by allowing more precise control over how elements are rendered and reducing browser quirks. For instance, the “dvh” and “dvw” units we’ve mentioned take into account the visible portion of the viewport, which makes it easier to create designs that adapt to user interactions like scrolling or zooming.

In 2023, dynamic viewport units are supported in most major browsers, including Chrome, Firefox, and Safari. However, some legacy and mobile browsers may still have limited support. Therefore, graceful degradation strategies, like using “calc()” functions with fallbacks may come in handy for broader compatibility.

Take a look at this code, for example: 

.header {

    height: 50dvh; /* 50% of the visible viewport height */

    font-size: calc(16px + 3dvw); /* Base size of 16px + 3% of the visible viewport width */

    background-color: #f7f7f7;

}

Here, the “.header” height is half of the visible screen height using “dvh”. Its font size starts at 16px and grows based on the screen width with “dvw.” This way, we can use dynamic viewport units for flexible designs.

Transforms

Transforms in CSS aren't new, but what is noteworthy is the growing ability to combine transformations like “translate,” “rotate,” and “scale” in more complex ways than before. This is particularly important for complex animations and transitions. Having more control over individual transformations like “rotate,” “translate,” and “scale” really expands what you can do, from better parallax effects to smoother animations. New functions like “rotate3d” and updates to “matrix” and “matrix3d” make things even easier and more flexible than before. This means you can create complex animations without leaning too much on JavaScript or other libraries, which is great for performance.

For example, if we need an element to rotate 360 degrees around a diagonal axis continuously, we can use: 

@keyframes rotateAnimation {

  from {

    transform: rotate3d(1, 1, 1, 0deg);

  }

  to {

    transform: rotate3d(1, 1, 1, 360deg);

  }

}



.box {

  width: 100px;

  height: 100px;

  background-color: red;

  animation: rotateAnimation 2s infinite linear;

}

When applied, this piece of code will make the element rotate as we desire. 

A Better Developer Experience

In the case of CSS, our tools affect the results of everything we create. In this section, we’ll discuss a few key changes that are making our lives as developers better today.

CSS Nesting

Let's talk nesting — a feature that's been in preprocessors like Sass for years and is now entering the CSS mainstream. Its main benefits are efficiency and readability. By grouping child selectors within their parent selectors, you eliminate redundancy and make your stylesheets easier to navigate. Instead of repeating “.parent .child,” you can nest “.child” within “.parent” to streamline your code and make it more manageable. Aside from the cosmetic improvement, it also reduces the room for error and improves maintainability.

For example, previously, with a parent selector like “.card,” you'd have to state each child relationship explicitly:

.card {

    /* card styles */

}

.card:hover, 

.card:focus {

    /* modifier styles */

}

But with nesting, you can simply place “.child” inside “.parent,” making the code shorter and easier to understand, like here:

.card {

    /* card styles */

    &:hover,

    &:focus {

        /* modifier styles */

    }

}

As for the roll-out, CSS Nesting has been included in Firefox Nightly, which set the stage for broader implementation. The inclusion in such a forward-looking branch of Firefox is promising. Given the time-saving potential of nesting, widespread support is not a matter of if but when.

Component-Driven Development

Now, let’s take a closer look at the ongoing transition from page-based to component-based web design. We're moving away from crafting individual pages towards constructing reusable components that can be assembled into any number of page layouts. This paradigm shift affects everything: how we write HTML and CSS, how we handle state in JavaScript, and even how we think about the user journey through a site.

Component-driven development optimizes for modularity and reusability, often facilitated by libraries like React or Vue. The benefits are hard to overlook: faster development cycles, easier debugging, and more consistent user interfaces. You're no longer dealing with a monolithic structure but a collection of interchangeable parts that make updates and scaling far more manageable tasks. 

Handy New Features

Aside from major shifts, there are a number of quality-of-life improvements for developers coming out this year. We're talking about smarter ways to organize your styles, more control over design, and even better typography. 

Cascade Layers

This is one of those features that can redefine how we handle CSS at scale. It gives developers the ability to name layers and import stylesheets accordingly. For example: 

@import './styles/base.css' layer(base); @import './styles/components/cards.css' layer(components);

The use of the layer() function specifies the “layer” or “group” to which each stylesheet belongs. What this does is offer an organized method to manage the order in which styles are applied, significantly easing the handling of style conflicts. Think of it as a priority system for your CSS, where you have far more control in specifying which styles take precedence over others. It can be especially useful in large codebases or in projects that involve multiple developers.

Scoping Styles

Scoping Styles is another feature in the CSS kit designed to minimize the side effects of global styling. By using the “:scope” pseudo-class or adopting the “@scope” rule, devs can keep styles local to a specific element or component. Take a look at this code:

@scope (.tab-container) to (.content) {
    img {
        max-width: 2rem;
    }
}

The “@scope” rule ensures that the style “max-width: 2rem;” is applied only to “<img>” elements that fall between the “.tab-container” and “.content elements”. This means you get a cleaner code by reducing the risk of unintended style overrides. Plus, localized scoping can lead to faster rendering times as the browser has fewer global styles to sift through.

Container Queries

Container Queries allow us to make our design more responsive by allowing elements to adapt based on their parent container rather than the viewport. This is a major change from older practices like media queries that relied just on viewport dimensions. The result is more modular and reusable components, as elements can now behave responsively in any context, not just at the page level, which allows for more flexible UIs in general. 

Expanded Color Capabilities

Speaking more about the visual aspects of web design, new capabilities like extended color spaces (LAB, LCH) and CSS color-mix functions bring us richer, more accurate color representation. Take a look at this example: 

color-mix(in var(--color-space), var(--color-1), var(--color-2));

The `color-mix` function blends two colors in a given color space like sRGB, XYZ, or OKLCH, as shown in the example. This provides designers with a broader palette and more granular control over color gradients and transitions.

The New and the Upcoming

As we move further into 2023, new features and updates come out. Below, we’ll take a look at the most exciting of them. 

Text Wrap Pretty

Handling “orphans” — single words or short lines at the end of paragraphs — has always been a tricky aspect of web typography. The “text-wrap-pretty” property, which we’ve already mentioned before, addresses this issue. It can automatically adjust text so that it avoids orphans, so there’s a more visually cohesive layout without manual intervention. It's a fantastic tool for improving the aesthetic and readability of large blocks of text. It's expected to be available soon in Chrome 117 for desktop and Android.

Quantity Queries

Quantity Queries in CSS let you apply styles depending on how many child elements there are. This is great for things like grids or lists that need different styles depending on the number of items. For example: 

.container div:nth-last-child(n+4):first-child,

.container div:nth-last-child(n+4):first-child ~ div {

    background-color: lightblue;

}

This way, you can use “:nth-last-child(n+4)” to set rules that only kick in when you have four or more items. This makes managing complicated layouts much easier.

Browser Support

The “@supports” rule isn't new, but its increasing support across browsers deserves some attention. It lets you test if a browser supports a particular CSS feature before applying styles, allowing graceful degradation or progressive enhancement. This is a way to create more robust, cross-browser compatible websites.

Let’s take a look at an example: 

@supports selector(:has(a)) {

    .post {

        display: none;

    }



    .filter-bar:has(#css-tag:checked) ~ .post:has([data-tag="CSS"]),

    .filter-bar:has(#html-tag:checked) ~ .post:has([data-tag="HTML"]) {

        display: block;

    }



    .filter-bar { /* styles */ }

}



@supports not selector(:has(a)) {

    .filter-bar {

        display: none;

    }

}

With this code, styles within the “@supports” block will only apply if the browser supports the “:has()” selector, allowing for advanced styling based on supported features.

Trigonometric Functions

For those interested in more organic and fluid interfaces, CSS is introducing trigonometric functions like “sin(),” “cos(),” and “tan().” They open up plenty of possibilities for curved or angular designs that were harder to create before. They're especially useful for creating non-rectangular layouts and advanced animations, like spirals or oscillations. These features are outlined in the CSS Values and Units Module Level 4 and are supported by all browsers.

Popovers

Popovers are getting an upgrade, making them easier to manage and more accessibility-focused. The proposed “::popover” pseudo-element aims to standardize the way these elements are styled and interacted with. For instance:

<button popovertarget="radial-menu">

  Create New Event

</button>

<ul role="menu" id="radial-menu" popover>

  <li> ... </li>

  <li> ... </li>

</ul>

With this code, a popover is triggered by the button targeting the “radial-menu,” and the menu itself is defined using a “<ul>” element with the role of “menu” and an ID of “radial-menu.” Along with ARIA attributes, this will make popovers not just visually engaging but also accessible to screen readers and other assistive technologies.

Animating Discrete Properties

Animating properties like “z-index” or “visibility” has always been a clunky process, often requiring JavaScript. The upcoming CSS features include methods for animating these discrete properties in an easier way, enhancing transitions, and making complex animations more manageable.

Future Progress and the Community

The context matters, so for the final part of this article, let’s see how CSS fits into the bigger picture of web development, from working with JavaScript frameworks to following web standards. There's a lot going on, and it's all connected.

JavaScript Frameworks and Libraries

The way CSS interacts with JavaScript frameworks like React, Vue, and Angular is becoming more intricate and effective. Take Cascade Layers and Container Queries as examples; these CSS features dovetail nicely with the component-based structure promoted by those frameworks. In Vue, scoped CSS gets a notable boost when coupled with CSS's native scoping. Similarly, React's component-centric approach can take advantage of Quantity Queries for smarter conditional rendering. What we're seeing is a more integrated ecosystem where CSS and JavaScript are actively complementing each other.

Web Standards

Web standards are important, particularly as they relate to semantic integrity. They’re maintained by organizations like W3C to ensure that new features benefit everyone, including users who rely on assistive technologies. The “::popover” pseudo-element and “@supports” rule we’ve mentioned above are steps in this direction, focusing not just on what looks good but also on what makes for a universally accessible web.

The devs community itself often amplifies these standards through open-source code contributions, forums, or direct discussions. We see this in the form of polyfills for backward compatibility, plugins for added functionality, and even entirely new proposals that can make it to the CSS spec.

It’s worth mentioning that some features we’ve discussed in this piece are still in development, but as we see, the advancements of CSS in 2023 aren't happening in a vacuum. With the combined effort of the technosphere, they are absolutely coming to life, along with many more useful updates. Whether you're building websites or just like using them, there's a lot to be excited about.