What's new in web

Stay organized with collections Save and categorize content based on your preferences.

Rachel Andrew

Published: May 20, 2025

At Google I/O 2025 the What's new in web keynote shared all of the Baseline announcements, along with a look at just some of the features that have become part of Baseline this year. It's been an amazing year for the web, and for Baseline, this post is a roundup of everything that was mentioned, with all the links to find out more.

The Web Platform Dashboard and web-features

In 2024 we announced the initial launch of the Web Platform Dashboard, which uses the web-features data set, allowing you to explore all the features that are part of Baseline.

The web-features data is now complete, with all features of the platform mapped. As new features join Baseline each month, the data is updated, and all of this is exposed on the dashboard.

Tools to help you discover your own Baseline target

While you might base your browser support policy on the moving target of Baseline Widely available—like UK agency Clearleft—you can also adopt a fixed target based on a Baseline year. You can now use your own user data, along with the web-features data to work out the best target for you.

Last year at I/O we announced that RUMvision would be implementing Baseline into their product, and this integration is now live.

Because it uses your RUM data, it helps you identify which Baseline year to adopt based on that data rather than a global average. It can also help you to see if Baseline Widely available makes sense for you.

You can also use your Google Analytics data to see clearly what percentage of your users support each Baseline target with the new Google Analytics Baseline Checker.

These are just two of a growing collection of tools that help you to map your real user data to Baseline.

The Web DX Community Group has recently launched an extension for Netlify that shows support for different Baseline years and Widely available on your sites to help you decide what to target in your build tools. Coming soon are integrations with Cloudflare's Observatory RUM product, and Contentsquare.

Integrate the data with your own tools

The web-features data is open and available for your own integrations. We're trying to make that easier to do.

Use the Web Platform Dashboard API, or consume the web-features data directly from the npm package.

You can now map browser versions to a Baseline target using the baseline-browser-mapping module from the W3C WebDX Community Group. This module can either be used in a server-side JavaScript environment, or by downloading JSON or CSV files that are refreshed on a daily basis from the repository.

This data includes mappings not only for the core Baseline browser set, but also for downstream browsers like Samsung Internet, Opera, UC Browser, and Android Webview.

Learn if features are supported by your Baseline target

Baseline information is now on the majority of MDN and Can I Use pages, it can also be found on the Web Platform Dashboard, and on articles on web.dev and CSS Tricks. However, this all requires you to look up support. It would be much more useful to have Baseline information shown in your IDE as you code, and as part of all the other tools you use.

We're excited to share with you that many key tools now have Baseline support built in, or easily integrated.

browserslist-config-baseline

Many tools like Babel and PostCSS use browserslist to determine which browsers to support.

Together with the WebDX CG and members of the community, the Chrome team helped to release a new tool called browserslist-config-baseline. This lets you configure your browserslist targets in Baseline terms like widely available or Baseline years.

With this, any tool that takes a browserslist target can now be expressed in terms of Baseline.

Find out more in Use Baseline with browserslist.

Baseline in linters—ESLint and Stylelint

Using Baseline with linters has recently been made possible with a few new tools in the linter space, starting with ESLint for CSS.

Baseline ESLint has a use-baseline rule. You can set this to your preferred Baseline target, and it'll warn you when using any features that are newer than your target. You can choose how to resolve those warnings: either by replacing that feature with primitives or by suppressing the linter warning, which is a perfectly valid solution when you know you're using a cutting edge feature safely, for example if it's a progressive enhancement.

By default, ESLint won't warn if newer features are used within @supports blocks, since unsupported browsers won't evaluate them anyway.

For your HTML linting needs, there's also a community plugin called html-eslint.

Stylelint officially supports a plugin called stylelint-plugin-use-baseline. This rule behaves just like the ESLint rule for CSS, but it runs on Stylelint instead.

Many linters also have IDE plugins, so you can get immediate feedback about Baseline status while coding by way of squiggly underlines.

Baseline in VS Code and JetBrains WebStorm

Many IDEs have long supported a way to hover over a feature in your editor and see the list of supported browser versions.

But it can be pretty hard to understand if that feature is actually safe to use—you need to mentally parse whether there are any major browsers missing from that list and how new that browser version is.

To fix that problem, we've partnered with the most popular IDE used by millions of web developers, VS Code, to integrate Baseline data directly into these hovercards.

You can now hover over a feature and it will just tell you whether the feature is considered Baseline and for how long, or whether there are any major browsers that don't fully implement it yet.

Supported features include CSS properties, HTML elements, and HTML attributes. Find out more in Visual Studio Code now supports Baseline.

This integration means that any IDEs based on VS Code will also benefit from these hovercards.

And, we're also able to announce that JetBrains are implementing hovercards into their WebStorm JavaScript and TypeScript IDE.

The web is improving faster than ever

We hope that Baseline helps you to take advantage of the fact that the interoperable web is improving faster than ever.

You can use the Web Platform Dashboard to see all of the features that have become Baseline Newly available in the last twelve months—since Google I/O 2024.

There's also a number of features you can be confident will be Baseline Newly available very soon as they are included in the Interop 2025 project. You can read about all the included features in Interop2025: another year of web platform improvements.

Sideways writing modes

We've already seen one feature become Baseline Newly available, the sideways-rl and sideways-lr values for the CSS writing-mode property. If you are using a vertical writing mode purely for layout purposes, the sideways values are likely the ones to reach for.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Anchor positioning

Anchor positioning shipped in Chrome 125. It gives you a way to tie the position of an element to an anchor, for example when opening a tooltip with a button.

It's now included in Interop 2025, so we should see it join Baseline this year.

Core Web Vitals: LCP and INP

LCP API

Event Timing API (for INP)

Web Vitals can help you quantify the experience of your site and identify opportunities to improve. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.

Interop 2025 includes Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) metrics by implementing the LargestContentfulPaint API and the Event Timing API across browsers.

Enhancements to the <details> element

The <details> element itself is already Baseline Widely available. It's been included in Interop 2025 as there are a number of features that make disclosure widgets with <details> more useful.

The <details> element contains a <summary> element which is the part visible on the page when the <details> element is collapsed. Outside of the <summary> is the content of the <details> element, this is hidden until the user clicks on the summary.

One of the things that is being made interoperable during Interop 2025 is to hide the content using content-visibility rather than display, meaning that if not expanded, the content won't be rendered at all.

Also part of the Interop 2025 work is the ::marker pseudo-element. The ::marker pseudo-element lets you style the <summary> element's disclosure triangle.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Then, another pseudo-element—::details-content.

::details-content represents the content—the part of the details element that expands and collapses, and lets you style it.

[open]::details-content {
  border: 5px dashed hotpink;
}

There's also some nice improvements such as auto-expanding the <details> element with find-in-page matches, and bringing the until-found value of the HTML hidden attribute to Baseline Newly available. This hides an element until it is found using the browser's find-in-page search or it is directly navigated to by following a URL fragment.

CSS @scope

The CSS @scope rule lets you limit the reach of your selectors. By setting a scoping root with @scope, any style rules nested inside the at-rule only apply to that DOM tree.

For example, if you only want to target <img> elements inside an element with a class of .card, then .card would become the scoping root.

@scope (.card) {
    img {
        border-color: green;
    }
}

Learn more in Limit the reach of your selectors with the CSS @scope at-rule.

scrollend

Another feature that reduces complexity and improves scrolling interfaces is scrollend. Without the scrollend event, there's no reliable way to detect that a scroll is complete.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

With the scrollend event, the browser does all this difficult evaluation for you.

document.onscrollend = event => {…}

See more examples in Scrollend, a new JavaScript event.

Same-document view transitions

Last but definitely not least, view transitions are part of Interop 2025. The work involves same-document view transitions, so those for single-page-apps and also view transitions classes.

Follow along on the Interop 2025 dashboard to see how the project is shaping up as the year progresses.

The features included in Interop 2025 won't be the only things that become part of Baseline this year, but their inclusion in the projects gives us a pretty good sign that they are prioritised and coming soon.

We're just getting started

It's been an exciting year for Baseline, and we've moved on a long way from our announcements last year. We're now in a position where the backfilling of web features data is complete. This has opened the floodgates and allowed developer tools to be created. We really are just getting started here, and if you have a product or open source tool that would benefit from including this data, we'd love to hear from you.

Keep an eye on web.dev as we'll continue to publish announcements about new tools along with tutorials to help you take advantage of everything the web has to offer.