What's new in the web

At Google I/O I shared news of how Baseline has evolved since our announcement at I/O last year. I also announced the Web Platform Dashboard, integrations with RUM Archive and the upcoming integration with RUMvision. This post brings all of the resources from the talk into one place.

The Web Platform Dashboard is an exciting new way to view the entire web platform, and the journey of individual features to interoperability, and becoming part of Baseline. Learn more about it in Announcing the Web Platform Dashboard.

Integrating Baseline with the tools you use every day has always been part of the vision for this project. We want to make dealing with browser compatibility something you don't have to spend much time thinking about. Learn more about the RUM Archive integration, and watch this space for news of more tooling providers soon.

New to Baseline

At I/O I shared 12 web platform features that have recently become part of Baseline Newly Available. These features are now available in Chrome, Edge, Firefox, and Safari, and range from small additions that can streamline development, to some of the most wanted features by developers—including container queries and :has().

Size container queries

Size container queries let you change your design based on the width or inline-size of a container, rather than only being able to target the size of the viewport with media queries. This enables more reusable components that can modify themselves based on the available space when placed into a layout. They have been top of the most wanted feature list for almost as long as the concept of responsive design has existed.

  • Newly available in February 2023.
  • Widely available in August 2025.

Learn more about container queries on MDN, in Container queries land in stable browsers, and discover how other development teams are benefiting from them in container queries case studies.

:has() selector

The :has() selector gives us something that has been another top request from developers for many years—a parent selector, a way to select an element based on what is inside it. Though :has() can be much more than just that.

As with container queries, this is incredibly useful when creating reusable components, as you can create a single component that can adapt to what it contains.

  • Newly available in December 2023.
  • Widely available in June 2026.

Learn more about :has() on MDN, in :has() the family selector, and in the :has() case studies.

CSS grid layout subgrid

Subgrid enables the ability for a nested grid layout to inherit the tracks from its parent. It allows for better alignment of items within nested grids.

  • Newly available in December 2023.
  • Widely available in June 2026.

Learn more about subgrid on MDN and in CSS subgrid which links to a large number of other resources.

CSS Nesting

In recent years CSS has taken inspiration from the features developers used in preprocessors such as Sass. For example, CSS Custom Properties, often known as CSS variables, are a widely available feature that allows for variables such as colors to be set in one place and used throughout your CSS, something previously only available when using a preprocessor.

Another feature of preprocessors is Nesting. Nesting helps to avoid repetition of selectors, and aids readability of CSS, because related things can be more easily grouped together.

  • Newly available in August 2023
  • Widely available in February 2026

Learn more about CSS Nesting on MDN, and in CSS Nesting.

The HTML <search> element

Search is something that appears on many sites and applications, however until recently there was no element to mark up functionality used for searching or filtering on a page. The <search> element was designed for this purpose. It exists as an element inside which you can place a search form, or other elements used for filtering results.

  • Newly available in October 2023
  • Widely available in April 2026

Learn more about the <search> element on MDN.

Responsive video

This feature refers to the ability to use the <source> element inside a <video> element to serve appropriate sized video to different devices in the same way you can serve different sized images.

  • Newly available in November 2023
  • Widely available in May 2026

Learn more on MDN in The Media or Image Source element, and in How to use responsive video.

The inert attribute

When an element is inert, it cannot be interacted with. For example, when opening a dialog window elements that are on the page behind the dialog can't be clicked or tabbed to. The inert attribute gives you a way to control inertness on any part of your UI.

With the inert attribute applied to an element, click events won't be fired if the element is clicked on, the element can't gain focus, the element and its content is hidden from assistive technologies as it is excluded from the accessibility tree.

  • Newly available in April 2023
  • Widely available in October 2025

Learn more about inert on MDN, and also in The inert attribute.

The color-mix() function

The color-mix() function enables mixing of one color into another, in any available color spaces, this includes all the new color models—LCH, Lab, OKLCH, and OKLab—that recently became part of Baseline Newly Available.

  • Newly available in April 2023
  • Widely available in October 2025

Learn more about color-mix() on MDN, and in CSS color-mix(). We also have a huge High definition CSS color guide covering all of the new color models that are available in CSS. Plus, check out gradient.style, to play with these new colors and create beautiful gradients.

:user-valid and :user-invalid

The pseudo-classes :valid and :invalid are widely available in browsers and they indicate whether a form element is currently valid according to any constraint rules placed on it, or invalid. Therefore, if you have a field with a type of email and it contains a name, the :invalid pseudo-class selects it and you can add a color or icon to demonstrate that it needs to be corrected.

The problem with the :valid and :invalid pseudo-classes is that they apply before the user has interacted with a form. Therefore, if a form element is required and the user hasn't completed it yet, your invalid styling will show. Typically you only want to show invalid styling once a user has entered something incorrectly or skipped over a field and left it blank.

To improve the user experience in this situation, use the :user-valid and :user-invalid pseudo-classes. These behave in pretty much the same way, except they only match once a user has interacted with the field. So, in the example of a required field, the user needs to have tabbed or clicked into the field and then moved away without completing it for the field to show the invalid state.

  • Newly available in October 2023
  • Widely available in April 2026

Learn more about :user-valid and :user-invalid on MDN.

Compression Streams

Many web applications need to provide a download to the user in a compressed format such as a zip file. In the past this required the application to include a compression library, code that increased the size of the application for all users. The Compression Streams API gives you a built-in way of compressing a stream of data.

  • Newly available in May 2023
  • Widely available in November 2025

Learn more about The Compression Streams API on MDN and in Compression Streams are now supported in all browsers.

The Declarative Shadow DOM

The Declarative Shadow DOM is a new way of creating a shadow tree from HTML, where previously you could only create a shadow tree from JavaScript using attachShadow(). Being able to do this from HTML is particularly useful in environments where JavaScript might not run, such an email client. It's also important for server-side rendered web components.

  • Newly available in February 2024
  • Widely available in August 2026

Learn more about the Declarative Shadow DOM.

The Popover API

Popups are used for many different tasks in our web applications. For example, menus, custom toast notifications, and content pickers. There's now a built-in way to create these popups in a decorative way with The Popover API.

  • Newly available in April 2024
  • Widely available in October 2026

Learn more about the Popover API on MDN, Popover API lands in Baseline, and in the Popover case studies.

These 12 features are just some of the things that have become part of Baseline Newly Available, and you can discover more on this site. Discover all the features that became part of Baseline 2023 and the growing collection of features that are part of Baseline 2024.