Last year with the compact 2021 movement, the majority of browsers agreed to stabilize 5 big features:

• sticky positioning
• aspect-ratio sizing
• flex layout
• grid layout
• transform positioning and layout

Nowadays these features can be used in all browsers with a full compatibility without polyfills.

This year with the Interop 2022 movement, the teams of the main browsers have agreed to deliver the following features:

• cascade layer
• color space and color function
• subrid and container queries
• typography
• inert
• dialog balise
• :has() CSS function
• viewport units

What are these features for?

This article aims to answer this question but also to present you the future of css still experimental or available behind flags.

Cascade layer: the new way to order its CSS

The cascade layer functionality is represented by a new css rule: @layer.

Before this feature, the way the css was written was very important, especially regarding its application order.
This requires developers to think carefully about the order in which to import their stylesheet, typically the least important stylesheet first and the most important stylesheet last.

With the css rule @layer your entry stylesheet (main stylesheet) can define layers and their order, ahead of time.
Subsequently, styles can be loaded or defined and then placed in a layer to preserve the importance of style overloading without worrying about the meticulous management of style orchestration

Example:

@layer base, ui;

@import '~bootstrap.css' layer(ui);

You can find more examples and more explanations with the following links:

• Cascade layer by Una Kravets
• MDN Documentation
• Hello, CSS Cascade Layers by Ahmad Shadeed

Colors: let's get out of the grey zone

Until now, colors were defined by the sRGB standard. However, technology is evolving, and today, devices have OLED, QLED screens and the sRGB standard is no longer enough.
Nowadays, the interface has to adapt dynamically, and the color scheme becomes a real challenge for the designer, the design system and the developers.

That time is over. In 2022 new functions and color space are available:

• colors that match HD displays
• color space that match an intent
• color space that change the interpolation outcomes
• color function to help you to mix color, contrast and choose in which space you want to work

Before the availability of all these functions it was necessary to make calculations, mainly delegated to Javascript, to smooth the colors.
Now, the css and the browser can do it dynamically in an optimized way

Warning theses functions are always in level 4 and 5, and not compatible for all the browser

HWB function

HWB stands for Hue, Whiteness, Blackness. This function presents itself as a human friendly way to create colors.
In fact, it's only a matter of a hue and an amount of white and black to lighten or darken.

Example:

:root {
  --lightBlue: hwb(200 75% 0%)
}

You can find more examples and more explanations with the following links:

• MDN Documentation
• HWB Specification

Color Mix

Before the color-mix feature, developers had to use preprocessors like Sass to mix colors before the browser could discover and evaluate them. However, most of the color-mix functions do not allow to specify the color space in which to mix the colors, which can sometimes result in confusion.

From now, developers can mix colors directly in the browser thanks to css without going through a build process or Javascript

Example:

:root {
 --red: #e53935
}

.color-mix {
  --darker: color-mix(var(--red), 25%, black);
  --lighter: color-mix(var(--red), 25%, white);
}

You can find more examples and more explanations with the following links:

• Color Mix Specification
• MDN Documentation

Color Contrast

Before the release of the color-contrast function, the authors of stylesheet had to know the accessibility colors ahead of time. Moreover, in the documentation of color palettes, this one shows the color switch of black and white text to indicate to the user the best accessibility.

With the color-contrast function all this work can be delegated to the browser. This function also allows you to let the browser choose between several colors the one that will pass the accessibility ratio you choose

Example:

color: color-contrast(grey vs red, indigo, purple);
color: color-contrast(var(--bg-primary) vs red, white to AA);
color: color-contrast(var(--bg-secondary));

You can find more examples and more explanations with the following links:

• Color Contrast Specification
• MDN Documentation

Subgrid and Container queries

Subgrid

When adding the display: grid property to a container, implicitly we create a grid system. Only direct descendants to this grid system can be placed on it, when the children of these descendants will be placed according to a usual flow.

We can nest grids in each other, however these grids will be created independently, nothing will be inherited, which will make it very difficult to align a cell of the child grid with a cell of the parent grid

With the subgrid value applied for the grid-template-columns and/or grid-template-rows properties, it becomes easy to use the parent grid system in the child grid system because the sizing is inherited.

Example:

.parent {
  display: grid;
  grid-template-columns: [fullLine-start] auto [main]95% auto [fullLine-end];
}

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

.child > * {
  grid-column: main;
}

You can find more examples and more explanations with the following links:

• Subgrid Specification
• MDN Documentation

Container media query

Before the @container CSS rule, a page could only respond to the change in size of its viewport. This system is very useful at the macro-layout level but not at the micro-layout level. It can be useful when working with mobile first design to adapt a content to its container.

This is exactly the objective of the css @container rule. After having given a type to the container and optionally a name (in case there are several containers in your page), adapting the content to its container will be a piece of cake.

Example:

.container {
  container-type: inline-size;
  container-name: main-content;
}

@container main-content (min-width: 64rem) {
  .card {
    width: 25%;
  }
}

You can find more examples and more explanations with the following links:

• Container queries Specification
• MDN Documentation
• The new responsive

Typography

Until now, the browser had the so-called OT-SVG fonts. This open format allowed to have fonts with color gradient and font effects. However, these fonts could become very large and even if they allowed to modify the style of a text, the customization remained limited.

With the COLORv1 standard, the web now has a smaller footprint and access to vector, repositional fonts, gradient-featuring, and blend-mode powered fonts that accept parameters to customize the font per use case or to match a brand.

Example:

@font-palette-values --name-palette {
  font-family: "Roboto";
  base-palette: 0;
  override-colors: 0 red, 1 cyan, 2 black;
}

.custom-color-text {
  font-family: "Roboto";
  font-palette: --name-palette;
}

You can find more examples and more explanations with the following links:

• Chrome Developers

Inert attribute

It is always a good practice to guide the user to the interactive zone of an application.
Very quickly we realize that we have to write a lot of code to prevent the user from leaving this interactive zone and to bring him back to this zone by force. This method is called: the focus trap

The inert attribute allows you to make certain parts of the screen inactive when you want the user to concentrate on a certain part of the screen and not lose focus.
This attribute makes sense for confirmation dialogs, where a user action is required.

Example:

<div inert>
  User can't click because this zone is inactive
  <button>Click Me</button>
</div>

You can find more examples and more explanations with the following links:

• Chrome Developers
• MDN Documentation

Dialog Balise

The dialog tag has been around for a long time and, as its name suggests, allows you to open an interactive zone dynamically without too much difficulty.
However, this element was not compatible with all browsers and especially with Safari.
To ensure compatibility with all browsers, it was generally necessary to recode part of this tag and its behavior. What a waste of time!

Today this tag is compatible with all the most recent browsers. What a good news :)!

Example

<dialog open>
  Content of my dialog
</dialog>

You can find more examples and more explanations with the following links:

• MDN Documentation

:has() CSS function

In CSS, the subject of a selector has always been at the end. You can modify the selector with pseudo selectors but it will not change the subject.

Let's take a very simple example:

div > p {}

Here we select all elements p that belong to a div.
But how to apply a particular style on the div element if one of its p elements has the class red?

This is where the :has() function will be very useful. It allows us to select the parent selector and to apply a certain style to it according to its child.

Example:

div:has(> p.red) {
  background-color: black;
}

You can find more examples and more explanations with the following links:

• MDN Documentation

New vieport units: easy to size on mobile device

Web browsers offer physical units of measurement to easily adjust viewport:

• vh to adjust the height
• vw to adjust the width
• vmin for the smallest size
• vmax for the largest size

The emergence of mobile browsers have shaken and challenged these measures. Indeed on a mobile, the url of the page is displayed in the status bar and inevitably this bar consumes space in the viewport.
What becomes much more complicated to manage is that after a few seconds or a few interactions this status bar disappears leaving more space in the viewport.

In order to facilitate the management of this behavior, the browser offers new units of measurement

• dvh: to dynamically adapt the height
• lvh: to indicate the maximum height
• svh: to indicate the minimum height

You can find more examples and more explanations with the following links:

• The large, small and dynamic viewport

Beyond 2022

Conditional CSS

Sometimes the css can be really boilerplate. Especially when you try to check if the css feature you want to use is available.

That's why it will be possible to create condition in css.

Before

@media(max-width: 450px) {
  @supports(grid-template-columns: subgrid) {
    .subgrid {
      display: grid;
      grid-column: main;
      grid-template-columns: subgrid
    }
  }
}

With Conditional CSS

@when(max-width: 450px) and supports(grid-template-columns: subgrid) {
  .subgrid {
    display: grid;
    grid-column: main;
    grid-template-columns: subgrid
  }
} @else {
  .subgrid {
    display: flex;
    width: 100;
    justify-content: center;
  }
}

Media queries range

Still in order to reduce the boilerplating of media queries in css, the media queries allowing to realize a maximum and minimum limit for the window have a new syntax

Before

@media(min-width: 400px) and (max-width: 1000px) {}

After

@media(400px <= width <= 1000px) {}

Typed custom properties

We need to type. If only to have consistency. But until now, despite the power of custom properties, it was impossible to type them correctly. This could sometimes lead to errors

:root {
 --medium-size: red;
}

.text {
  height: var(--medium-size);
}

In this piece of code no error is raised and the size will take an unsupported value.

with the css rule @Property it will be possible to type your custom-properties and even give them a default value

@property --medium-size {
  syntax: '<length>';
  initial-value: 0px;
}

:root {
 --medium-size: red; // ignore because red not match the length rule
}

Conclusion

The CSS has a bright future.

These new things will allow us to

• make designs adaptable to different screens easily.
• reduce the boilerplate

Obviously this article does not include all the css changes that are coming but the main ones from my point of view.