May's stable releases: container queries, lazy media, and more

Chrome 148, Firefox 151, and Safari 26.5 all reached stable in May, bringing a wave of long-awaited CSS features to full cross-browser support, along with some notable API additions.

:open pseudo-class rounds out browser support

Safari 26.5 is mostly a maintenance release, but it does add support for the :open CSS pseudo-class, making the feature Baseline Newly available. This selector targets elements with an "open" state, providing a semantic alternative to attribute-based styling. It works with <details>, <dialog>, and <select> or <input> elements while their picker interfaces are visible.

Container queries get simpler

Chrome 148 ships support for name-only container queries, which is now Baseline Newly available. Previously, a container query required a size or style condition paired with the container name, and the container needed an explicit container-type. Now you can query for the existence of a named container without extra conditions, and skip setting container-type entirely when only querying by name:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Style queries for custom properties hit Baseline

Firefox 151 brings cross-browser support for style() queries inside @container rules for custom properties, marking the feature as Baseline Newly available. This lets you conditionally style descendants based on property values set on a parent container:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Support now spans Chrome and Edge 111, Safari 18, and Firefox 151.

Native lazy loading for media elements

Chrome 148 introduces lazy loading for <video> and <audio> via the loading="lazy" attribute. As with images and iframes, the browser defers fetching media resources until they approach the viewport, reducing initial page load cost and data consumption.

Document Picture-in-Picture arrives in Firefox

Firefox 151 adds support for the Document Picture-in-Picture API on desktop. Unlike the standard Picture-in-Picture API for video, this API opens an always-on-top window populated with arbitrary HTML. That means you can build interactive overlays like conference grids or persistent timers that survive page navigation. Chrome and Edge have supported this API since version 116.

Web Serial API extends to Android and Firefox

The Web Serial API, which lets web apps communicate with serial devices like microcontrollers and development boards, gained platform support this month. Chrome 148 enables it on Android, and Firefox 151 supports it on desktop—where access requires a synthetically generated site permission add-on to manage authorization.

Previewing next month: Chrome 149 and Firefox 152 betas

Chrome 149 beta features CSS gap decorations for styling whitespace between flex and grid items. It also adds path(), shape(), rect(), and xywh() shape functions to shape-outside, plus a new path-length CSS property. On the API side, scroll methods like scrollTo(), scrollBy(), and scrollIntoView() return Promises that resolve when smooth scrolling completes, and pages with active WebSocket connections can now be eligible for back/forward cache.

Firefox 152 beta includes full support for the field-sizing property, which lets form controls size themselves to their content. It also adds actions and maxActions to the Notification interface and implements options.pseudoElement in Element.getAnimations().