At Google I/O I shared news of how Baseline has evolved since our announcementat I/O last year. I also announced the Web Platform Dashboard, integrationswith RUM Archive and the upcoming integration with RUMvision. This post bringsall of the resources from the talk into one place.
The Web Platform Dashboard is an exciting new way to view the entire webplatform, and the journey of individual features to interoperability, andbecoming part of Baseline. Learn more about it inAnnouncing the Web Platform Dashboard.
Integrating Baseline with the tools you use every day has always been partof the vision for this project. We want to make dealing with browsercompatibility something you don't have to spend much time thinking about.Learn more about the RUM Archive integration, andwatch 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 ofBaseline Newly Available. These features are now available in Chrome, Edge,Firefox, and Safari, and range from small additions that can streamlinedevelopment, to some of the most wanted features by developers—includingcontainer queries and :has().
Size container queries
Size container queries let you change your design based on the width orinline-size of a container, rather than only being able to target the size ofthe viewport with media queries. This enables more reusable components thatcan 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 asthe 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 discoverhow other development teams are benefiting from them incontainer queries case studies.
:has() selector
The :has() selector gives us something that has been another top requestfrom developers for many years—a parent selector, a way to select an elementbased on what is inside it. Though :has() can be much more than just that.
As with container queries, this is incredibly useful when creating reusablecomponents, as you can create a single component that can adapt to what itcontains.
- 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 tracksfrom 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 MDNand in CSS subgrid which links to a large number ofother resources.
CSS Nesting
In recent years CSS has taken inspiration from the features developers used inpreprocessors such as Sass. For example, CSS Custom Properties, often knownas CSS variables, are a widely available feature that allows for variablessuch as colors to be set in one place and used throughout your CSS, somethingpreviously only available when using a preprocessor.
Another feature of preprocessors is Nesting. Nesting helps to avoid repetitionof selectors, and aids readability of CSS, because related things can be moreeasily 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, howeveruntil recently there was no element to mark up functionality used forsearching or filtering on a page. The <search> element was designed forthis purpose. It exists as an element inside which you can place a searchform, 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 inthe 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, whenopening a dialog window elements that are on the page behind the dialog can'tbe clicked or tabbed to. The inert attribute gives you a way to controlinertness on any part of your UI.
With the inert attribute applied to an element, click events won't be firedif the element is clicked on, the element can't gain focus, the element andits content is hidden from assistive technologies as it is excluded fromthe 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 anyavailable 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 guidecovering all of the new color models that are available in CSS. Plus,check out gradient.style, to play with these newcolors and create beautiful gradients.
:user-valid and :user-invalid
The pseudo-classes :valid and :invalid are widely available in browsersand they indicate whether a form element is currently valid according to anyconstraint rules placed on it, or invalid. Therefore, if you have a fieldwith a type of email and it contains a name, the :invalid pseudo-classselects it and you can add a color or icon to demonstrate that it needsto be corrected.
The problem with the :valid and :invalid pseudo-classes is that theyapply before the user has interacted with a form. Therefore, if a formelement is required and the user hasn't completed it yet, your invalidstyling will show. Typically you only want to show invalid styling once auser has entered something incorrectly or skipped over a field and left itblank.
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, inthe example of a required field, the user needs to have tabbed or clickedinto the field and then moved away without completing it for the field toshow the invalid state.
- Newly available in October 2023
- Widely available in April 2026
Learn more about :user-validand :user-invalidon MDN.
Compression Streams
Many web applications need to provide a download to the user in a compressedformat such as a zip file. In the past this required the application toinclude a compression library, code that increased the size of the applicationfor all users. The Compression Streams API gives you a built-in way ofcompressing a stream of data.
- Newly available in May 2023
- Widely available in November 2025
Learn more about The Compression Streams API on MDNand 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 usingattachShadow(). Being able to do this from HTML is particularly useful inenvironments where JavaScript might not run, such an email client. It'salso 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 abuilt-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 thePopover case studies.
These 12 features are just some of the things that have become part ofBaseline Newly Available, and you can discover more on this site. Discoverall the features that became part of Baseline 2023and the growing collection of features that are part ofBaseline 2024.
