New to the web platform in August | Blog

August’s stable releases: transforms, queries, and more

August 2022 brought stable releases for Firefox 104, Chrome 104, and Chrome 105, along with a set of notable CSS and JavaScript features. Here’s what changed and what’s worth testing.

Individual CSS transform properties

Chrome 104 ships scale, rotate, and translate as standalone CSS properties. These let you define each component of a transform separately instead of folding everything into a single transform declaration, making transforms easier to write, read, and animate. Support now spans Chrome, Firefox, and Safari.

Media query range syntax

Chrome 104 also adopts the newer media query range syntax, already present in Firefox. Instead of combining min-width and max-width with and, you can use comparison operators for a more direct expression of viewport constraints.

All major engines now support this syntax: Chrome 104, Edge 104, Firefox 102, and Safari 16.4.

Container queries in Chrome 105

Chrome 105 is the standout release of the month, bringing container queries to the platform. Where media queries respond to the viewport size, container queries let you style elements based on the size of their containing element.

To set up container queries, apply containment to a parent with the container-type property:

.card-container {
  container-type: inline-size;
}

Using inline-size means queries check the inline dimension of the container—the width in left-to-right languages. Styles are then applied to descendants with an @container rule:

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Container queries are supported in Chrome 105, Edge 105, Firefox 110, and Safari 16.

The :has() pseudo-class

Chrome 105 also lands :has(), which lets you select a parent or sibling based on conditions further down the tree—something previously difficult or impossible in CSS. The feature arrives in Chrome 105, Edge 105, Firefox 121, and Safari 15.4.

Sanitizer API and :modal

Chrome 105 introduces the Sanitizer API, a built-in mechanism for stripping untrusted HTML and reducing cross-site scripting risks. The same release adds the :modal pseudo-class, which matches elements that block interaction with everything outside them—such as a <dialog> opened via showModal().

findLast() and findLastIndex() arrive behind a flag

Firefox 104 adds support (currently behind a flag) for Array.prototype.findLast(), Array.prototype.findLastIndex(), and their TypedArray counterparts. These methods search an array from the end and return the matching value or its index, respectively. They are already available by default in Chrome 97, Edge 97, and Safari 15.4.

What’s next in beta

For previews of upcoming stable releases, August only saw Firefox 105 enter beta, and its release notes remain sparse. The Safari 16 beta, which began in June, is still in progress and carries several key features worth tracking.