At Google I/O I shared information of how Baseline has developed since our announcement
at I/O final yr. I additionally introduced the Internet Platform Dashboard, integrations
with RUM Archive and the upcoming integration with RUMvision. This put up brings
the entire sources from the discuss into one place.
The Internet Platform Dashboard is an thrilling new technique to view your entire internet
platform, and the journey of particular person options to interoperability, and
changing into a part of Baseline. Study extra about it in
Asserting the Internet Platform Dashboard.
Integrating Baseline with the instruments you employ daily has all the time been half
of the imaginative and prescient for this undertaking. We wish to make coping with browser
compatibility one thing you do not have to spend a lot time enthusiastic about.
Study extra concerning the RUM Archive integration, and
watch this house for information of extra tooling suppliers quickly.
New to Baseline
At I/O I shared 12 internet platform options which have just lately turn out to be a part of
Baseline Newly Out there. These options are actually obtainable in Chrome, Edge,
Firefox, and Safari, and vary from small additions that may streamline
growth, to among the most needed options by builders—together with
container queries and :has().
Measurement container queries
Measurement container queries allow you to change your design primarily based on the width or
inline-size of a container, reasonably than solely having the ability to goal the dimensions of
the viewport with media queries. This permits extra reusable elements that
can modify themselves primarily based on the obtainable house when positioned right into a format.
They’ve been prime of probably the most needed characteristic record for nearly so long as
the idea of responsive design has existed.
- Newly obtainable in February 2023.
- Extensively obtainable in August 2025.
Study extra about container queries on MDN,
in Container queries land in steady browsers, and uncover
how different growth groups are benefiting from them in
container queries case research.
:has() selector
The :has() selector offers us one thing that has been one other prime request
from builders for a few years—a mum or dad selector, a technique to choose a component
primarily based on what’s inside it. Although :has() will be far more than simply that.
As with container queries, that is extremely helpful when creating reusable
elements, as you may create a single element that may adapt to what it
accommodates.
- Newly obtainable in December 2023.
- Extensively obtainable in June 2026.
Study extra about :has() on MDN,
in :has() the household selector,
and within the :has() case research.
CSS grid format subgrid
Subgrid allows the flexibility for a nested grid format to inherit the tracks
from its mum or dad. It permits for higher alignment of things inside nested grids.
- Newly obtainable in December 2023.
- Extensively obtainable in June 2026.
Study extra about subgrid on MDN
and in CSS subgrid which hyperlinks to a lot of
different sources.
CSS Nesting
Lately CSS has taken inspiration from the options builders utilized in
preprocessors similar to Sass. For instance, CSS Customized Properties, usually identified
as CSS variables, are a broadly obtainable characteristic that enables for variables
similar to colours to be set in a single place and used all through your CSS, one thing
beforehand solely obtainable when utilizing a preprocessor.
One other characteristic of preprocessors is Nesting. Nesting helps to keep away from repetition
of selectors, and aids readability of CSS, as a result of associated issues will be extra
simply grouped collectively.
- Newly obtainable in August 2023
- Extensively obtainable in February 2026
Study extra about CSS Nesting on MDN,
and in CSS Nesting.
The HTML
Search is one thing that seems on many websites and purposes, nonetheless
till just lately there was no component to mark up performance used for
looking out or filtering on a web page. The
this goal. It exists as a component inside which you’ll place a search
kind, or different parts used for filtering outcomes.
- Newly obtainable in October 2023
- Extensively obtainable in April 2026
Study extra concerning the
Responsive video
This characteristic refers back to the potential to make use of the
component to serve acceptable sized video to totally different gadgets in
the identical means you may serve totally different sized pictures.
- Newly obtainable in November 2023
- Extensively obtainable in Might 2026
Study extra on MDN in The Media or Picture Supply component,
and in Find out how to use responsive video.
The inert attribute
When a component is inert, it can’t be interacted with. For instance, when
opening a dialog window parts which are on the web page behind the dialog cannot
be clicked or tabbed to. The inert attribute offers you a technique to management
inertness on any a part of your UI.
With the inert attribute utilized to a component, click on occasions will not be fired
if the component is clicked on, the component cannot achieve focus, the component and
its content material is hidden from assistive applied sciences as it’s excluded from
the accessibility tree.
- Newly obtainable in April 2023
- Extensively obtainable in October 2025
Study extra about inert on MDN,
and in addition in The inert attribute.
The color-mix() perform
The color-mix() perform allows mixing of 1 coloration into one other, in any
obtainable coloration areas, this consists of all the brand new coloration fashions—LCH, Lab,
OKLCH, and OKLab—that just lately turned a part of Baseline Newly Out there.
- Newly obtainable in April 2023
- Extensively obtainable in October 2025
Study extra about color-mix() on MDN,
and in CSS color-mix().
We even have an enormous Excessive definition CSS coloration information
masking the entire new coloration fashions which are obtainable in CSS. Plus,
try gradient.model, to play with these new
colours and create stunning gradients.
:user-valid and :user-invalid
The pseudo-classes :legitimate and :invalid are broadly obtainable in browsers
they usually point out whether or not a kind component is at the moment legitimate in accordance with any
constraint guidelines positioned on it, or invalid. Due to this fact, when you’ve got a area
with a sort of e-mail and it accommodates a reputation, the :invalid pseudo-class
selects it and you may add a coloration or icon to exhibit that it wants
to be corrected.
The issue with the :legitimate and :invalid pseudo-classes is that they
apply earlier than the person has interacted with a kind. Due to this fact, if a kind
component is required and the person hasn’t accomplished it but, your invalid
styling will present. Usually you solely wish to present invalid styling as soon as a
person has entered one thing incorrectly or left out a area and left it
clean.
To enhance the person expertise on this state of affairs, use the :user-valid and
:user-invalid pseudo-classes. These behave in just about the identical means,
besides they solely match as soon as a person has interacted with the sector. So, in
the instance of a required area, the person must have tabbed or clicked
into the sector after which moved away with out finishing it for the sector to
present the invalid state.
- Newly obtainable in October 2023
- Extensively obtainable in April 2026
Study extra about :user-valid
and :user-invalid
on MDN.
Compression Streams
Many internet purposes want to supply a obtain to the person in a compressed
format similar to a zipper file. Prior to now this required the applying to
embrace a compression library, code that elevated the dimensions of the applying
for all customers. The Compression Streams API offers you a built-in means of
compressing a stream of knowledge.
- Newly obtainable in Might 2023
- Extensively obtainable in November 2025
Study extra about The Compression Streams API on MDN
and in Compression Streams are actually supported in all browsers.
The Declarative Shadow DOM
The Declarative Shadow DOM is a brand new means of making a shadow tree from HTML,
the place beforehand you possibly can solely create a shadow tree from JavaScript utilizing
attachShadow(). With the ability to do that from HTML is especially helpful in
environments the place JavaScript may not run, such an e-mail consumer. It is
additionally vital for server-side rendered internet elements.
- Newly obtainable in February 2024
- Extensively obtainable in August 2026
Study extra concerning the Declarative Shadow DOM.
The Popover API
Popups are used for a lot of totally different duties in our internet purposes. For instance,
menus, customized toast notifications, and content material pickers. There’s now a
built-in technique to create these popups in an ornamental means with The Popover API.
- Newly obtainable in April 2024
- Extensively obtainable in October 2026
Study extra about the Popover API on MDN,
Popover API lands in Baseline, and within the
Popover case research.
These 12 options are simply among the issues which have turn out to be a part of
Baseline Newly Out there, and you may uncover extra on this web site. Uncover
all of the options that turned a part of Baseline 2023
and the rising assortment of options which are a part of
Baseline 2024.