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.