New to the web platform in April

Discover some of the interesting features that landed in stable and beta web browsers during April 2023.

Rachel Andrew

Stable browser releases

In April 2023, Firefox 112, and Chrome 112 became stable. Let's take a look at what this means for the web platform.

Caution: We include browser compatibility data pulled from MDN in these posts which may not have updated for very recent browser releases. The post will show the correct information as soon as it appears in the browser-compat-data release.

The inert attribute

Firefox 112 includes the inert global attribute. This attribute tells the browser to ignore the element, indicating content that should not be interactive. It:

• Prevents click events being fired.
• Prevents the element from gaining focus.
• Excludes the element and its contents from the accessibility tree.

This attribute is now interoperable in all three engines.

Browser Support

• 102
• 102
• 112
• 15.5

Source

The linear() easing function

The linear() easing function enables linear interpolation between a number of points. This enables more complex animations such as bounce and elastic effects. This function is in Firefox 112.

Browser Support

• 113
• 113
• 112
• 17.2

CSS nesting

Chrome 112 adds support for CSS Nesting, a feature that is highly anticipated by many developers. This introduces a new nesting selector >, used to nest related style rules, in a way that will be familiar to developers who have used pre-processors:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Browser Support

• 120
• 120
• 117
• 17.2

Source

CSS animation-composition

Chrome 112 also includes support for animation-composition. Learn how this property works in Specify how multiple animation effects should composite with animation-composition.

Browser Support

• 112
• 112
• 115
• 16

Source

New headless mode

If you use Chrome's Headless mode, for example with Puppeteer, then 112 brings an all new Headless mode. Learn about it in Chrome's Headless mode gets an upgrade.

Beta browser releases

Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are Firefox 113 and Chrome 113, with the Safari 16.5 beta still ongoing. These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.

Firefox 113 includes the color(), lab(), lch(), oklab(), and oklch() functions. Also included is the color-mix() function from CSS Color 5, and the forced-color-adjust property.

Firefox also includes the nth-child of <selector> syntax, giving finer control of which elements you want to select. Read more in More control over :nth-child() selections with the of S syntax.

For CSS, Chrome 113 includes the overflow-inline, overflow-block, and update media features. Also included in the linear() easing function, and the unprefixed image-set() type.

Chrome 113 also includes WebGPU, the successor to the WebGL and WebGL 2 graphics APIs for the Web. It provides modern features such as GPU compute, lower overhead access to GPU hardware, the ability to render to multiple canvases from a single graphics device, and better, more predictable performance.

Part of the New to the web series