Blog

New to the web platform in July

Fri, 31 Jul 2026 07:00:00 GMT

Discover some of the interesting features that have landed in stable and beta web browsers during July 2026.

Published: July 31, 2026

Stable browser releases

Chrome 151, Firefox 153, and Safari 26.6 released to stable during July 2026. This post takes a look at the new features landing across the web platform this month.

HTML parser updates in Firefox 153 bring customizable `<select>` closer

Firefox 153 updates HTML parsing rules for <select> elements. Previously, only <option>, <optgroup>, and <hr> elements were allowed to be parsed as children inside a <select>. With this update, all nested elements can be parsed into the DOM inside <select>, laying the groundwork for customizable select elements across browsers.

The `ruby-overhang` CSS property

Chrome 151 adds support for the ruby-overhang CSS property. This property controls whether ruby annotation text can overhang adjacent base characters. It accepts auto, spaces, or none keywords. Per the CSS specification, none is aliased to spaces, which allows ruby text to overhang only whitespace and CJK punctuation, preventing unnecessary layout gaps while maintaining readability.

Browser Support

Source

Declarative Shadow DOM manual slot assignment

Chrome 151 introduces the shadowrootslotassignment attribute on the <template> element. This attribute allows declarative shadow roots to configure manual slot assignment instead of named slot assignment. Previously, manual slot assignment was only available imperatively with attachShadow({slotAssignment: "manual"}). It accepts named (default) or manual, and is reflected in JavaScript through the shadowRootSlotAssignment property on HTMLTemplateElement.

Browser Support

Source

The `animation` property on `AnimationEvent` and `TransitionEvent`

Chrome 151 adds a read-only animation attribute to the AnimationEvent and TransitionEvent interfaces. This attribute returns the underlying Animation object associated with the event, allowing you to query animation state directly inside event listeners.

Browser Support

Source

Desktop Picture-in-Picture API in Firefox

Firefox 153 brings support for the Picture-in-Picture API to desktop platforms. This provides a standard web API for sites to toggle display of a <video> element between the page and a floating, always-on-top window, allowing users to keep watching video content while switching tabs or interacting with other applications.

Browser Support

Source

The `Intl.Locale` Info API

Firefox 153 adds support for the TC39 Intl.Locale info proposal. This adds several getter methods to Intl.Locale instances, including getCalendars(), getCollations(), getHourCycles(), getNumberingSystems(), getTextInfo(), getTimeZones(), and getWeekInfo(). These methods allow developers to inspect locale-specific conventions without needing external internationalization data libraries.

With this release these methods are now Baseline Newly available.

const jaJP = new Intl.Locale("ja-JP");
console.log(jaJP.getCalendars()); // ["gregory", "japanese"]

Browser Support

Source

`IDBObjectStore.getAllRecords()` and `IDBIndex.getAllRecords()`

Firefox 153 introduces IDBObjectStore.getAllRecords() and IDBIndex.getAllRecords(). These IndexedDB methods retrieve all matching records (including primary keys, index keys, and values) in a single request, eliminating the need to write complex cursor iteration logic when fetching dataset subsets or full object store contents.

Browser Support

Source

`textStream()` for `Response`, `Request`, and `Blob`

Chrome 151 adds the textStream() method to Response, Request, and Blob objects. This convenient helper method provides a readable stream of decoded text strings directly from binary body data, equivalent to piping body through a TextDecoderStream().

Browser Support

The `<usermedia>` capability element MVP

Chrome 151 introduces the declarative <usermedia> capability element. This browser-controlled element provides an explicit, user-initiated mechanism for requesting camera and microphone access. By anchoring permission prompts to a clear user interaction with a trusted element, <usermedia> improves prompt transparency and user experience while offering a straightforward recovery path if permission was previously denied.

Find out more in Introducing the HTML <usermedia> element.

Bug fixes and quality-of-life updates in Safari 26.6

Safari 26.6 shipped with important bug fixes and stability enhancements:

Fixed an issue where the ic length unit scaled incorrectly with page zoom.
Fixed position-area fallback behavior for fixed-positioned elements when the page body is scrollable.
Corrected CSS zoom interaction with font properties (font-size, font-weight, font-style, font-variant) on iPad when requesting desktop sites.
Fixed deletion of partitioned cookies using cookie headers.

Beta browser releases

Beta browser versions give you a preview of features coming to the next stable release. It's an ideal time to test new features or check for breaking changes before they reach all users. New betas this month are Chrome 152, Firefox 154, and Safari 27.

Chrome 152 beta includes CSSPseudoElement support for ::backdrop, ::scroll-marker, and ::view-transition, the global autocorrect HTML attribute, media element pseudo-classes (:playing, :paused, :muted), the CSS Color 5 alpha() relative color function, the window-drag property, the CPU Performance API, and WebGPU subgroup size control.

Firefox 154 beta introduces WebRTC transport improvements including RTCIceTransport.getSelectedCandidatePair() and the selectedcandidatepairchange event, as well as the error event on RTCDtlsTransport.

Safari 27 beta brings a large suite of new features, including the ariaNotify API for screen reader announcements, contain: style for quote counters, case-sensitive s modifier in attribute selectors, the stretch keyword for box sizing, :host:has() compound selectors, the :heading pseudo-class, revert-rule keyword, transform-aware anchor positioning, color-mix() with more than two colors, and the no-clamp option on progress().

The Baseline Features audit is now available in Lighthouse

Mon, 27 Jul 2026 07:00:00 GMT

Published: July 27, 2026

The Baseline Features diagnostic audit is available in Lighthouse in the Best Practices audit category. This audit reports the Baseline status of web platform features detected on a page, providing browser interoperability information directly within Lighthouse reports.

The web-features package powers this audit, which identifies web platform features used on a page, including features in third-party scripts and active browser extensions. It identifies the Baseline status of each detected feature—Widely available, Newly available, or Limited availability—and lets you see where the feature appears in the page source code, with links to web feature entries on webstatus.dev.

The Baseline Features audit is available in the current version of Lighthouse and Chrome DevTools. You can run it on any page in Lighthouse to inspect feature usage and read browser compatibility data.

June 2026 Baseline monthly digest

Fri, 17 Jul 2026 07:00:00 GMT

Published: July 17, 2026

Welcome once again to the Baseline monthly digest. In June 2026, field-sizing became Baseline Newly available, allowing form controls to automatically adjust to their content. Meanwhile, a wide range of CSS, HTML, and Web API features reached Baseline Widely available status, alongside important updates from the developer community.

Baseline Alerts on Web Platform Status

Keeping track of when web features become interoperable is now easier with Baseline Alerts on the Web Platform Status dashboard. By signing in with GitHub, you can subscribe to notifications for features as they become Baseline Newly available, Widely available, or receive new browser implementations. Subscriptions can be configured to send email updates or custom RSS feeds on a monthly, weekly, or immediate schedule. You can scope alerts to saved searches—like all HTML features—create custom newsletters, generate shareable feature lists, or configure Slack webhooks to notify your engineering team.

Learn more in Introducing Baseline Alerts.

Baseline Newly available features

The features in this section are supported as of June 2026 in the core browser set and are now Baseline Newly available.

`field-sizing`

The field-sizing CSS property provides control over the sizing behavior of form elements—such as <textarea>, <input>, and <select>—that traditionally have default fixed dimensions. With field-sizing: content form controls automatically expand or shrink to fit their content, reducing the need for custom JavaScript auto-resize scripts.

Learn more in the MDN reference page for field-sizing.

Baseline Widely available features

The following features became Baseline Widely available, meaning that they are now broadly compatible and usable in your projects.

`:has()` pseudo-class

The :has() CSS parent selector lets you style an element based on its descendants or subsequent siblings. This functional pseudo-class enables conditional layout patterns directly in CSS without needing JavaScript to inspect DOM structures.

Read more in the MDN page for the :has pseudo-class.

`HTMLIFrameElement.loading`

The loading property on <iframe> elements enables lazy loading for embedded frames. By specifying loading="lazy", browsers defer loading offscreen iframes until they are scrolled near the viewport, saving network bandwidth and initial page load overhead.

Check out the details on the MDN reference for HTMLIFrameElement.loading.

`CanvasRenderingContext2D.reset()`

The reset() method on 2D canvas contexts clears the drawing context state—resetting properties like transformations, clipping paths, line styles, and fill styles back to their default values. This allows a canvas context to be reused cleanly without manual property cleanup.

Find out more on the MDN documentation for CanvasRenderingContext2D.reset.

`cap` length unit

The cap font-relative unit corresponds to the nominal cap height of the element's font. It lets you align and size elements relative to the height of uppercase letters, enabling precise typographic layouts.

Learn more in the MDN reference for length units.

`counter-set` property

The counter-set CSS property sets a CSS counter to a specified value, complementing counter-reset and counter-increment. It provides control when manipulating numbered lists, document outlines, or custom counter sequences.

Read the details on the MDN page for counter-set.

`createImageBitmap()`

The createImageBitmap() static method creates an asynchronous bitmap image from various image sources, including <img>, <canvas>, Blob, or ImageData. Because it decodes images off the main thread, it avoids blocking UI performance when handling complex canvas graphics.

Check the implementation details on the MDN documentation for createImageBitmap.

`<easing-function>` data type

The <easing-function> CSS data type describes mathematical rate-of-change curves for transitions and animations. Beyond standard keywords like ease-in or cubic-bezier(), it supports functions like linear() to construct custom spring or bounce effects.

Learn how to use it on the MDN reference for easing-function.

`&` nesting selector

The & nesting selector explicitly anchors child rule selectors to their parent selector when using built-in CSS nesting. It ensures clarity and correct specificity rules when defining nested hover, focus, or pseudo-class states.

Read the details on the MDN guide for the nesting selector.

Responsive preloading with `rel="preload"`

The media attribute on <link rel="preload"> elements enables responsive preloading of key assets. By combining rel="preload" with media queries, browsers download only the assets matching the user's viewport width or display characteristics early in the loading lifecycle.

Find out how to use it on the MDN documentation for rel="preload".

`HTMLMediaElement.preservesPitch`

The preservesPitch property on <audio> and <video> elements controls whether the browser adjusts audio pitch when changing the playbackRate. Setting it to false allows pitch shifts when speeding up or slowing down media playback.

Check out the details on the MDN page for HTMLMediaElement.preservesPitch.

`:dir()` pseudo-class

The :dir() CSS pseudo-class matches elements based on text directionality (such as ltr or rtl), matching direction inherited from HTML attributes like dir or computed text context.

Learn more in the MDN page for the :dir pseudo-class.

`pow()` math function

The pow() CSS function calculates exponential power values directly within CSS declarations, raising a base number to an exponent (for example, pow(2, 3)). This simplifies responsive scaling and mathematical grid relationships.

Read the details on the MDN reference for the pow function.

CSS `mask` property

The mask CSS shorthand property hides parts of an element using images or gradients as clipping layers. It combines sub-properties like mask-image, mask-position, and mask-repeat to create complex visual masking effects.

Find out more on the MDN page for the mask property.

`@media (scripting)`

The scripting media feature tests whether client-side scripting (such as JavaScript) is enabled and available in the browser context. This allows progressive enhancement styles to target environments with or without active JavaScript.

Learn more in the MDN reference for the scripting media feature.

`URL.canParse()`

The URL.canParse() static method checks whether a given string is a valid, parsable URL (with an optional base URL) without throwing an exception, simplifying runtime URL validation before instantiating URL objects.

Check the implementation details on the MDN documentation for URL.canParse.

Storage Access API

The Storage Access API provides a mechanism for cross-site content embedded within third-party <iframe>s to request unpartitioned cookie and storage access, enabling authentication and stateful interactions across domain boundaries.

Read the details on the MDN page for the Storage Access API.

That's a wrap

Tell us if we missed anything Baseline-related, and we will make sure it gets captured in a future edition! If you have any questions or want to provide feedback on Baseline, you can file an issue in our issue tracker.

New to the web platform in June

Tue, 30 Jun 2026 07:00:00 GMT

Discover some of the interesting features that have landed in stable and beta web browsers during June 2026.

Published: June 30, 2026

Stable browser releases

Chrome 149, Chrome 150, and Firefox 152 released to stable during June. There was no Safari stable release this month. This post takes a look at the new features landing in web browsers.

Sizing form controls with `field-sizing` becomes Baseline

Firefox 152 introduces support for the field-sizing CSS property, making automatic form control sizing Baseline Newly available across all major browser engines.

The field-sizing property lets form controls like <textarea>, <input>, and <select> shrink or grow dynamically to fit their content (field-sizing: content) instead of remaining fixed at a default size (field-sizing: fixed). This eliminates the need for JavaScript workarounds when building text inputs or textareas that resize as users type.

textarea {
  field-sizing: content;
}

Browser Support

Source

Basic shapes `rect()` and `xywh()` in `shape-outside` become Baseline

With Chrome 149 shipping support for the rect() and xywh() shape functions in the shape-outside property, these basic shapes are now Baseline Newly available across major browsers.

The rect() and xywh() functions let you define rectangular float exclusion areas using exact inset coordinates or origin-and-dimensions syntax. This offers a simpler and more readable syntax than using polygon() for rectangular float wrapping shapes.

Browser Support

Source

Automatic font scaling with CSS `text-fit`

Chrome 150 introduces the text-fit CSS property, letting developers automatically scale font sizes to fit the width of a containing box.

.headline {
  text-fit: grow;
}

Browser Support

CSS gap decorations

Chrome 149 introduces support for CSS gap decorations in grid and flexbox layouts. Gap decorations let you add lines and styling directly to the spacing between grid and flex items, similar to column-rule in multi-column layouts.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Learn more in Gap decorations: Now in Chromium.

Browser Support

Source

CSS `background-clip: border-area`

Chrome 150 adds support for background-clip: border-area from CSS Backgrounds Level 4.

This value clips element backgrounds specifically to the border area, letting you create custom gradient borders, decorative frame edges, and animated border effects without requiring extra wrapping elements or pseudo-elements.

Browser Support

Programmatic scroll promises

Chrome 150 updates programmatic scroll methods (scrollTo(), scrollBy(), and scrollIntoView()) to return a Promise.

The returned Promise resolves when the smooth scrolling animation finishes, providing a reliable signal for triggering follow-up actions once scrolling settles.

Declarative keyboard navigation with `focusgroup`

Chrome 150 introduces support for the focusgroup attribute.

The focusgroup attribute lets developers declaratively manage arrow key navigation across composite UI controls (such as toolbars, tablists, and menus) without manually writing keyboard event listeners.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Learn more from the Focusgroup Explainer.

WebSockets supported in Back/Forward Cache (bfcache)

In Chrome 149, pages with active WebSocket connections can now enter the Back/Forward Cache (bfcache).

Previously, an open WebSocket connection rendered a page ineligible for bfcache. Now, the browser automatically closes active WebSocket connections upon bfcache entry, allowing the page to be cached and instantly restored when navigated back to.

Interim and header response timing in Resource Timing

Firefox 152 adds support for firstInterimResponseStart and finalResponseHeadersStart on the PerformanceResourceTiming interface.

These can be used to measure how long it takes for the browser to receive interim HTTP responses and the final HTTP response after sending a request, respectively.

Browser Support

Source

Action buttons for Notifications

Firefox 152 adds support for notification action buttons using the actions property on Notification and options in ServiceWorkerRegistration.showNotification().

You can now include action buttons on OS notifications and listen for user interactions when buttons are tapped.

Browser Support

Source

Beta browser releases

Beta browser versions give you a preview of features in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas this month are Firefox 153 and Safari 27.

Firefox 153 beta introduces support for Error.stackTraceLimit to configure maximum captured stack trace depth, IDBObjectStore.getAllRecords() and IDBIndex.getAllRecords() for retrieving indexed records, and RTCDtlsTransport.getRemoteCertificates() for WebRTC security inspection. Add-on developers also gain a new publicSuffix API and userScripts.execute() method for on-demand script injection.

Safari 27 beta introduces transform-aware anchor positioning, the :heading pseudo-class for matching heading elements, the revert-rule keyword to roll back cascade layers, support for the stretch keyword in box sizing, and :host:has() compound selectors.

Introducing Baseline Alerts

Thu, 25 Jun 2026 07:00:00 GMT

Published: June 25, 2026

The Web Platform Status dashboard helps developers understand the interoperability of web features through clear tagging of their Baseline status—but knowing the moment a feature becomes interoperable takes effort. You must check the dashboard periodically to see if a feature becomes Baseline, or discover it elsewhere. This delays adoption, and you might forget.

With Baseline Alerts added to the dashboard, you can be notified about changes in the web features you care about. This feature is more than convenient: It lessens the time between awareness of a feature and adoption of it.

How do Baseline Alerts work?

Go to the Web Platform Status dashboard and sign in with GitHub. After you sign in, a Subscriptions button appears.

On the home page, you can subscribe to all features.
On an individual feature's page—such as JPEG XL, for example—you can subscribe to updates for that feature.
On a saved search page, such as for all CSS features, you can subscribe to updates for the features in that search.

The Subscriptions dialog lets you choose the notifications you want and the frequency:

The Subscriptions dialog on webstatus.dev lets you choose the triggers and frequency for when you receive alerts.

A subscription can trigger an email notification or update a custom RSS feed when features:

Become Widely available
Become Newly available
Get a new browser implementation
Regress to limited availability

You can opt to receive these changes every month, week, or every time the underlying feature changes. Once subscribed, manage your subscription by selecting the Subscriptions menu item.

How are Baseline Alerts useful?

Baseline Alerts let you receive email notifications about web feature status, but you can also use them for other tasks.

Create a personalized newsletter

Baseline Alerts are useful because you can scope them to the features you care about. This lets you create a personalized newsletter for specific features. For example, you can list all HTML web features with the group:html query. From the results page, save the search.

Save searches on webstatus.dev for any query you want to keep track of.

Once the search is saved, you'll be able to subscribe to updates to its features.

To get Baseline Alerts for features matching a saved search, subscribe to that search.

In this example, you'd get an alert every time an HTML feature becomes Baseline Newly available or Widely available. The query syntax for the Web Platform Status dashboard is also more flexible than for just groups. You can save a search for any query you can come up with and create a custom feature set for which you can receive notifications. For more information, see the query grammar.

Create shareable lists

You can also share saved searches. You can do this using the URL—which is viewable by anyone who has it—or you can generate a QR code for that page. Select the share icon on the saved search page.

This is useful for content creators and web influencers, who can share a list of features with their audience in videos and conference talks. It gives your audience a way to get in-depth information about the features you want them to use.

Slack webhooks

If you run a Slack channel, you can use Baseline Alerts to send feature updates to a Slack webhook URL. To do this, select Notification channels in the left-hand menu, and you'll see a section labeled Webhook. From there, you can add a Slack webhook URL and give it a name. Once you've added it, you can set it as a notification target when you subscribe to features.

Send requests automatically to a Slack webhook URL based on your subscription preferences.

In the future, we hope to expand this feature so that webhooks can be used across more services, such as creation of issues on GitHub, and other useful development tools.

Give it a try!

Baseline Alerts accelerate the discovery of interoperable features so you can begin developing with them sooner. To provide feedback, file an issue on the webstatus.dev GitHub repository.

Effortlessly get Baseline target data with the updated Baseline Checker tool

Mon, 08 Jun 2026 07:00:00 GMT

Published: June 8, 2026

Google Analytics users, the Baseline Checker tool is updated to remove its biggest point of friction: manual data exports. Use this tool to choose the right Baseline target for your site.

Previously, you had to manually sign in to your Google Analytics account, set up a data export, download it, and upload it into the tool.

Thanks to recent updates exposing browser version data in the Google Analytics API, the workflow is streamlined. Now, the tool lets you sign in with Google to securely fetch this data using the API. As before, all of your data is processed locally on your device.

Here is how it works:

Go to baseline-checker.chrome.dev
Select Sign in with Google and select your Google Account
Choose your target Google Analytics account and property
Specify your date range (defaults to the last 28 days)
Select Generate Report to fetch and process the data

With a few clicks, you can get a clear report showing the exact proportion of your users that support specific Baseline targets, without the need to manually export the data from Google Analytics.

Use the updated Baseline Checker tool to make more data-driven decisions about which features (or fallbacks) you can use in production.

May 2026 Baseline monthly digest

Wed, 03 Jun 2026 07:00:00 GMT

Published: June 3, 2026

Welcome to the Baseline monthly digest. In May 2026, several new CSS features, event properties, and API additions became Baseline Newly available, while CSS units, user interaction properties, and pseudo-classes reached Baseline Widely available, alongside important updates from the developer community.

State of CSS 2026 survey

The web community's annual pulse-check is here: the State of CSS 2026 survey is now open. This year, the organizers have made a conscious effort to refine the survey, focusing on the features that matter most to developers in an era of AI-assisted coding. Browser vendors closely monitor these results to help prioritize their engineering roadmaps and address developer pain points. Be sure to lend your voice and share your experience with the evolving CSS landscape before it closes on July 1.

Baseline newly available features

The features in this section are supported as of May 2026 in the core browser set and are now Baseline newly available.

Container style queries

Container queries are no longer limited to size. With style queries, you can now apply styles to elements based on the custom properties of a parent container. This lets you build highly modular components that can adapt their theme or styling based on their contextual placement without relying on complex class structures.

Learn more in the MDN reference page for @container.

`:open` pseudo-class

Styling elements that have open and closed states—like <dialog> and <details>—previously required checking attributes or managing classes. The :open pseudo-class simplifies this by matching these elements only when they are currently in their open state, allowing for cleaner and more declarative CSS.

Read about it in the MDN page for the :open pseudo-class.

`ToggleEvent.source`

When working with the Popover API, reacting to state changes is crucial. The source property of the ToggleEvent interface returns the control element that triggered the popover toggle action. This lets you identify the origin of the event and coordinate complex UI interactions.

Find out more on the MDN documentation for ToggleEvent.source.

`image-rendering` property

The image-rendering CSS property lets you control the scaling algorithm used when resizing images. This is particularly useful for pixel art, low-resolution images, or QR codes where it's important to avoid blurry interpolation and keep scaling sharp and pixelated.

Learn how to use it on the MDN page for image-rendering.

`text-decoration-skip-ink: all`

Underlines passing through descenders can sometimes look cluttered. While text-decoration-skip-ink: auto skips ink only when intersecting, setting it to all forces the underline to skip all glyphs regardless of intersection, offering more control over typography aesthetics.

Read the details on the MDN guide for text-decoration-skip-ink.

`SharedWorker`

The SharedWorker API provides a specialized background worker that can be accessed from multiple browsing contexts, such as different windows, tabs, or iframes on the same origin. This is powerful for sharing state, managing connections, or coordinating background tasks across tab boundaries.

Check out the MDN documentation for SharedWorker.

Baseline widely available features

The following features became Baseline widely available, meaning that they are now broadly compatible and usable in your projects.

`lh` length unit

The lh relative unit corresponds to the computed line-height of the element on which it is used. This makes it simpler to size elements—such as icon badges or background highlights—to perfectly match the height of a line of text.

Learn more in the MDN reference for length units.

`rlh` length unit

Similar to lh, the rlh unit represents the line-height, but specifically of the root element (<html>). This lets you establish a consistent vertical rhythm across your entire page, regardless of local font size or line-height overrides.

Read more in the MDN reference for length units.

`Navigator.userActivation`

Many web APIs (such as video playback, popups, or clipboard access) require user interaction before they can be triggered. The Navigator.userActivation property returns an object containing information about the user's current and historical activation state on the window, letting scripts verify if a user gesture has occurred.

Find out how to use it on the MDN page for Navigator.userActivation.

`clip-path`

The clip-path CSS property lets you create a clipping region that defines what portion of an element should be visible. By using basic shapes (like circles, ellipses, or polygons) or SVG paths, you can create engaging layout designs and transitions without hiding overflow.

Check the implementation details on the MDN page for clip-path.

`:user-invalid` pseudo-class

Unlike :invalid, which applies styling as soon as a page loads (often leading to poor UX), the :user-invalid pseudo-class only matches invalid form elements after the user has interacted with them. This means you can show form validation feedback after the user leaves the field.

Learn how it works in the MDN documentation for :user-invalid.

That's a wrap

New to the web platform in May

Fri, 29 May 2026 07:00:00 GMT

Discover some of the interesting features that have landed in stable and beta web browsers during May 2026.

Published: May 29, 2026

Stable browser releases

Chrome 148, Firefox 151, and Safari 26.5 released to stable during May. This post takes a look at the many new features this month.

The `:open` CSS pseudo-class becomes Baseline

Safari 26.5 is mostly a release of fixes to existing features. However, it also includes support for the :open pseudo-class, making this feature Baseline Newly available.

The :open pseudo-class lets you style elements that have "open" and "closed" states when they are open. This applies to elements such as <details> and <dialog> when they are open, as well as <select> and <input> elements (like color or date pickers) when their picker interfaces are showing. This provides a cleaner, semantic alternative to styling using attributes like details[open].

Browser Support

Source

CSS name-only container queries become Baseline

With Chrome 148 shipping this month, name-only container queries are now Baseline Newly available.

Previously, when writing a container query, you were required to specify a size or style query condition alongside the container name, and establish the container's type with the container-type property. Now, you can query the presence of a named container by its name only, without any additional condition. Furthermore, you no longer need to set a container-type on the ancestor if you are only querying by name:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

Container style queries for custom properties become Baseline

Firefox 151 introduces support for style() queries on @container, making container style queries for custom properties Baseline Newly available.

Container style queries allow you to apply styles to elements based on the CSS properties of a parent container. While size queries are extremely powerful, style queries enable you to query non-size features. In particular, this release brings full cross-browser support for querying custom properties. For example, you can check if a custom property --theme is set to dark on a parent container:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

Lazy loading for video and audio elements

Chrome 148 introduces native lazy loading for <video> and <audio> elements with the loading="lazy" attribute.

Just like <img> and <iframe> elements, you can now instruct the browser to delay loading media resources until they are close to the viewport. This helps improve page load performance, save bandwidth, and reduce data usage for your users. Learn more from the team who implemented this feature in How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today.

Browser Support

Source

The Document Picture-in-Picture API

Firefox 151 introduces support for the Document Picture-in-Picture API on desktop platforms.

Unlike the standard Picture-in-Picture API which lets you view a <video> element in an always-on-top window, the Document Picture-in-Picture API lets you open an always-on-top window containing arbitrary HTML content. This enables rich interactive overlays such as video conference participant grids, interactive stock tickers, or timers that persist even when navigating away from the page.

Browser Support

Source

Web Serial API expands platform support

Firefox 151 adds support for the Web Serial API on desktop platforms, and Chrome 148 adds support for it on Android.

The Web Serial API provides a way for websites to read from and write to serial devices, for example, microcontrollers, 3D printers, development boards, and peripheral hardware. In Firefox, using the Web Serial API requires users to install a synthetically generated site permission add-on, ensuring a safe and controlled mechanism to manage access.

Browser Support

Source

Beta browser releases

Chrome 149 beta includes exciting CSS updates like CSS gap decorations, letting you style the whitespace (gaps) between flex and grid items. It also supports path() and shape() as well as rect() and xywh() basic shape functions in the shape-outside property, and path-length as a CSS property. On the API side, programmatic scroll methods like scrollTo(), scrollBy(), and scrollIntoView() now return Promises resolving when smooth scrolling completes, and pages with active WebSocket connections can now qualify for back/forward caching (BFCache).

Firefox 152 beta introduces full support for the field-sizing property, which lets form controls automatically adjust their size to fit their contents. It also adds actions and maxActions properties to the Notification interface, and options.pseudoElement support in Element.getAnimations().

April 2026 Baseline monthly digest

Wed, 27 May 2026 07:00:00 GMT

Published: May 27, 2026

Welcome to the Baseline monthly digest. In April 2026, some CSS capabilities and precision math utilities became newly available, while structural semantic elements and other Web API additions became widely available, along with happenings in the developer community.

Baseline and accessibility in 2026

Building for the web means building an experience that everyone can use, and a recent piece from A11y Up makes the case that accounting for accessibility needs is more effective when developers rely on web standards. For some time, engineers have shipped custom and often heavy JavaScript solutions to recreate accessible patterns that are now part of the web platform. These bespoke solutions are sometimes fragile, prone to breaking under assistive tech, and are challenging to maintain.

The article highlights that as web platform features achieve cross-browser interoperability, they make developing with accessibility in mind a more effective task. Using web features to achieve common goals and user interface patterns handles much of the heavy lifting, smoothly exposing the right semantics directly to screen readers and keyboard navigation utilities. Baseline acts as a guide here, signaling the moment a web feature is mature enough to evaluate and use in your projects.

Baseline newly available features

The features in this section are supported as of April 2026 in the core browser set and are now Baseline newly available.

CSS `contrast-color()` function

Dynamic theme engines and customizable components have forced developers to maintain multiple color systems to accommodate a user preference for high contrast. The CSS contrast-color() function shifts that maintenance burden entirely to the browser. By passing a base input color into the function, the engine evaluates and returns a highly contrasting companion color, typically mapping to either black or white depending on which delivers the highest readability score.

.card-header {
  background-color: var(--dynamic-bg-color);
  /* Automatically resolves to the highest-contrast text color */
  color: contrast-color(var(--dynamic-bg-color));
}

This lets you meet accessible standards for readability, without a custom solution, or CSS that is hard to maintain. While you should still keep an eye on your mid-tone color choices, this function reduces boilerplate CSS required to handle this user accommodation. You can find out more on the MDN reference page for contrast-color().

`Math.sumPrecise()`

Summing sequences of numbers using standard loops or methods like Array.prototype.reduce() can result in floating-point precision loss. This can affect important financial calculations or telemetry totals.

The Math.sumPrecise() method addresses this problem. It accepts an iterable of numbers and executes a precision-safe routine to provide an accurate sum. Take a look into the mechanics on the MDN documentation for Math.sumPrecise().

Baseline widely available features

The following features became Baseline widely available, meaning that they are now broadly compatible and usable in your projects.

`<search>` element

The HTML <search> element acts as an explicit wrapper for form controls, filtering mechanisms, and submission utilities that collectively represent a search experience on a web application.

<search>
  <form action="/site-search">
    <label for="query">Search documentation</label>
    <input type="search" id="query" name="q">
    <button>Go</button>
  </form>
</search>

By switching a containing element to the <search> tag, you provide an accessibility benefit to users. The browser automatically assigns an implicit ARIA landmark role of search to the element, removing the need to specify role="search" on the <form> element. This lets screen readers identify and help users navigate to search interfaces. Read the implementation details on the MDN page for the <search> element.

Web Authentication public key access

Going passwordless with the Web Authentication (WebAuthn) API is now less complex thanks to broad support for direct property extractors on the AuthenticatorAttestationResponse interface. With methods like getPublicKey() and getPublicKeyAlgorithm(), the browser extracts public key details for you without having to work with raw binary data. Learn more about these properties and how to use them on the MDN page for AuthenticatorAttestationResponse.

`String.prototype.isWellFormed()` and `String.prototype.toWellFormed()`

JavaScript strings are UTF-16 encoded, which maps complex characters and emoji in Unicode pairs. If a string is sliced without accounting for this, isolated halves of a surrogate pair—known as lone surrogates—will remain resulting in malformed text.

isWellFormed() lets developers check whether a string contains lone surrogates and returns a boolean. If a string fails validation, you can call toWellFormed() to replace the rogue surrogates with the standard Unicode replacement character (U+FFFD). This is helpful before calling functions such as encodeURI(), which will throw a URIError when encountering malformed inputs. Learn how these methods work in the MDN documentation for String.prototype.isWellFormed().

ARIA attribute reflection

Updating accessibility states on interactive elements required roundtrips through standard DOM attribute methods—for example, element.setAttribute('aria-expanded', 'true'). ARIA attribute reflection simplifies this by mirroring accessibility properties as object properties.

The Element interface reflects ARIA attributes straight to instance properties like element.ariaExpanded, element.ariaChecked, and element.ariaHidden. This lets you modify accessibility states using dot-notation syntax:

// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";

Treating ARIA targets as JavaScript properties lets UI frameworks and state management tools coordinate assistive contexts more reliably, and helps to keep screen reader contexts aligned with your actual application state. For a complete list of reflected properties, check out the MDN guide on Element instance properties.

That is a wrap

New to the web platform in April

Fri, 24 Apr 2026 07:00:00 GMT

Discover some of the interesting features that have landed in stable and beta web browsers during April 2026.

Published: April 24, 2026

Stable browser releases

Chrome 147 and Firefox 150 released to stable during April. There was no stable release of Safari this month. This post takes a look at the many new features this month.

The `contrast-color()` CSS function becomes Baseline

With Chrome 147 shipping the contrast-color() function, this useful accessibility feature is now available across all major engines, making it Baseline Newly available.

This function takes a color value and returns either black or white, depending on which provides the highest contrast against the provided color. This helps ensure your text meets accessibility contrast requirements.

Browser Support

Source

The `ariaNotify()` method

Firefox 150 introduces support for the ariaNotify() method on Document and Element. This method allows content authors to queue a string of text to be announced by a screen reader.

This provides a more reliable and ergonomic alternative to ARIA live regions, especially for announcements not tied to DOM updates.

Browser Support

Source

Auto sizes for lazy-loaded images

Firefox 150 now supports the "auto" keyword for the sizes attribute of <img> elements. This allows lazy-loaded images to use the calculated image layout size to select the best source from a srcset, simplifying responsive image setup.

Browser Support

Element-scoped view transitions

Chrome 147 exposes element.startViewTransition() on arbitrary HTML elements. This allows for transitions scoped to a specific element, meaning pseudo-elements are affected by ancestor clips and transforms, and multiple transitions can run concurrently.

Browser Support

Source

CSS `border-shape` property

Chrome 147 introduces the border-shape property, allowing you to create non-rectangular borders with shapes like polygons or circles.

Browser Support

Source

SVG `<textPath>` path attribute

Chrome 147 adds support for the path attribute on the SVG <textPath> element, letting you define text path geometry inline.

Browser Support

Modulepreload support for JSON and style

Chrome 147 adds support for JSON and style module types as <link rel="modulepreload"> destinations.

Browser Support

`Math.sumPrecise`

Chrome 147 implements the TC39 proposal for Math.sumPrecise, returning a precise sum of values in an iterable. This method is now Baseline Newly available.

Browser Support

Source

Beta browser releases

Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas this month are Chrome 148, Firefox 151, and Safari 26.5.

Chrome 148 beta includes name-only container queries in CSS, lazy loading for video and audio elements, and the at-rule() function for feature detection in @supports.

Firefox 151 beta includes CSS container style queries.

The Safari 26.5 beta includes support for the :open pseudo-class on <details>, <dialog>, <select>, and <input> elements, in addition to a large number of issue resolutions.

This post previously included the Scroll-driven animation range properties becoming Baseline. These properties haven't yet shipped in Firefox, so this post was updated to remove the incorrect information.

March 2026 Baseline monthly digest

Tue, 14 Apr 2026 07:00:00 GMT

Published: April 14, 2026

It's been a busy month for the web platform! In March 2026, several powerful features crossed the interoperability threshold to become Newly available in Baseline, while a massive wave of established tools reached the Widely available milestone.

This month's progress highlights the incredible momentum of the web. From advanced layout controls and internationalization improvements to low-latency networking and sophisticated streaming capabilities, the platform is becoming more capable and robust for developers everywhere.

Baseline Newly available features

The following features became interoperable across all core browser engines in March 2026.

Math font family

The math value for the font-family property is specifically designed for rendering mathematical content. It ensures that MathML elements are displayed using fonts optimized for complex mathematical formulas, providing better spacing and character support for technical documents. Learn more about the math font family on MDN

`Iterator.concat()`

This new static method for iterators lets developers combine multiple iterables (like Arrays, Sets, or custom iterators) into a single iterator. This simplifies code that needs to process sequences of data consecutively without manually nesting loops or creating intermediate arrays. Learn more about Iterator.concat() on MDN

Readable byte streams

The Streams API now includes full support for readable byte streams. These are optimized for handling binary data, allowing for efficient memory management by reading data directly into developer-supplied buffers. This is a game-changer for performance-critical applications handling large files or network data. Learn more about Readable byte streams on MDN

Reporting API

The Reporting API provides a generic reporting mechanism for web applications to receive notifications about browser-level errors and violations, such as Content Security Policy (CSP) violations, deprecations, and crash reports. It centralizes these reports, sending them to a specified endpoint for easier monitoring. Learn more about the Reporting API on MDN

`WebTransport`

WebTransport is a modern API providing low-latency, bidirectional, client-server communication. Built on top of HTTP/3, it supports both reliable data transmission and unreliable datagrams, making it ideal for real-time applications like gaming and live streaming. Learn more about WebTransport on MDN

`text-indent: each-line` declaration

The each-line keyword for text-indent extends indentation beyond just the first line of a block. When used, it indents the first line as well as any line following a hard line break (like a <br>), offering more granular control over typographic layouts. Learn more about text-indent: each-line on MDN

`text-indent: hanging` declaration

The hanging keyword inverts the default indentation behavior. It leaves the first line of a block at the start of the line while indenting all subsequent lines. This is a common requirement for bibliographies and specific editorial styles. Learn more about text-indent: hanging on MDN

Baseline Widely available features

In March 2026, these features moved into the Widely available tier, meaning they have been interoperable for 30 months and are safe to use in most production environments without polyfills.

`contain-intrinsic-size` CSS property

Part of the CSS Containment module, contain-intrinsic-size allows developers to specify a placeholder size for elements that are under size containment. This prevents layout shifts when content is lazily loaded or hidden. Learn more about contain-intrinsic-size on MDN

`@counter-style` at-rule

The @counter-style rule allows developers to define custom numbering or bullet styles for lists. This goes far beyond the standard decimal or disc styles, allowing for complex, localized, or purely decorative list markers. Learn more about @counter-style on MDN

Device orientation events

These events provide data from the device's hardware, such as the gyroscope and accelerometer. Developers can use this information to create immersive experiences that respond to the physical movement and orientation of a user's device. Learn more about Device orientation events on MDN

`hyphenate-character` CSS property

This property lets you define the character used at the end of a line when a word is hyphenated. While a standard hyphen is the default, this property provides the flexibility to use other characters for specific design or language requirements. Learn more about hyphenate-character on MDN

`hyphens` CSS property

The hyphens property controls how the browser handles hyphenation when text wraps. You can set it to none, manual (using soft hyphens), or auto (allowing the browser to use its own hyphenation dictionary). Learn more about the hyphens CSS property on MDN

`image-set()` CSS function

The image-set() function allows CSS to deliver the most appropriate image based on the user's device capabilities, such as screen resolution. It functions similarly to the srcset attribute for <img> tags, ensuring high-quality visuals without wasting bandwidth. Learn more about the image-set() CSS function on MDN

`<link rel="modulepreload">`

This link relation allows developers to tell the browser to fetch and process JavaScript modules (and their dependencies) early in the page load process. This reduces the time spent on the critical path and improves the performance of module-heavy applications. Learn more about <link rel="modulepreload"> on MDN

Overflow media queries

The overflow-block and overflow-inline media features allow you to query how the device handles content that overflows the initial viewport. This is particularly useful for tailoring styles for different types of display devices, like paged media (printers) versus continuous scrolling screens. Learn more about overflow media queries on MDN

`navigator.storage`

The Storage API provides a way to manage and query the storage persistence and quota of a website. It allows developers to check how much space is available and request that the browser keep data persistent rather than clearing it when storage is low. Learn more about navigator.storage on MDN

`update` media query

The update media feature lets you detect how frequently the output device is able to modify the appearance of the content. This helps in distinguishing between fast-refresh screens (like smartphones) and slow-refresh or static displays (like e-ink readers). Learn more about the update media query on MDN

CSS subgrid

CSS subgrid is a powerful extension of CSS Grid that allows a nested grid to inherit the track definitions (columns and rows) of its parent grid. This makes it significantly easier to align elements across different levels of the DOM tree, solving a long-standing layout challenge. Learn more about CSS subgrid on MDN

Rachel Andrew goes to Web Day Out

Last month, Chrome's own Rachel Andrew wrote Look into the future of the web platform, which mentioned a talk she gave at Web Day Out. The presentation covered browser support—not just Baseline targets, but how you might decide to use features that don't meet your Baseline target.

It's a good talk to help you understand how the availability of interoperable features slides one way or the other based on the Baseline target you choose. By choosing a later target, you're gaining more features, but at a cost of broader compatibility. It might make sense to think about setting your Baseline target to line up with your project's launch day, so you're not missing out features you could be safely using on day one.

Pragmatically choosing a Baseline target is a good thing to talk about—and we certainly recommend you check out Rachel's take on it). When you think about Baseline targets as points in time—rather than specific browsers—that mindset helps you make decisions that aren't merely "safe" today, but decisions that are more forward thinking about emerging interoperable features while maintaining a high standard of compatibility.

Adding Baseline status to an Eleventy site

Stu Robson wrote about how he added the Baseline status web component to his Eleventy website last month. The post goes into some detail about the process, including how the component is conditionally loaded for some articles that are about specific web features. It's an excellent read if you document web features on your website, how you use them, and how to quickly signal to your readers if those features are interoperable.

Of course, the Baseline status web component isn't limited to Eleventy—it's an open source web component that is independent of any framework or site generator.

Feedback

If there's a feature you're waiting for that isn't in Baseline, or if you've found an issue with one of the features listed here, let us know on our tracker. Your feedback helps us prioritize the work that matters most to you.

February 2026 Baseline monthly digest

Mon, 30 Mar 2026 07:00:00 GMT

Published: March 30, 2026

February has been another eventful month for the web platform. From enhanced security with Trusted types to a more ergonomic CSS syntax for complex shapes, the tools at our disposal continue to mature across all major browser engines.

In this digest, we'll take a look at the features that reached Baseline milestones this month, helping you build a more robust and capable web with interoperability in mind.

Interop 2026 has launched

Last month, Interop 2026 launched, which is an effort to increase the interoperability of web features. This effort involves representatives from companies that substantially contribute to browser rendering engines:

Interop is an important initiative because emerging web features are prioritized, and much effort goes into landing high-priority features in all major browser engines. As with years past, there is a dashboard available to help you understand the pass rates of tests against identified key features.

Baseline Newly available features

The following features became part of Baseline in February 2026, meaning they are now newly supported across all major browser engines.

CSS `shape()` function

The shape() function is a new addition to the <basic-shape> data type, providing a more intuitive way to define complex paths for the clip-path and offset-path properties. Unlike the path() function, which requires a single string of SVG-like commands, shape() uses a standard CSS syntax. This lets you use CSS units (like rem, em, or %), math functions like calc(), and even CSS variables within your shape definitions. This makes creating responsive, dynamic shapes significantly easier for developers who are more comfortable with CSS than SVG path strings.

Learn more about the CSS shape() function on MDN.

Trusted types

Securing web applications against DOM-based cross-site scripting (XSS) attacks gets a major boost with the Baseline arrival of the Trusted Types API. This API requires developers to process data through "policies" before it can be passed into dangerous "sinks"—APIs that can execute code or render HTML, such as Element.innerHTML or eval(). By enforcing these policies through the Content Security Policy (CSP), you can ensure that only sanitized or "trusted" data is ever used in a way that could lead to an injection vulnerability, moving security checks from a manual review process to a platform-enforced guarantee.

Read the documentation for the Trusted Types API on MDN.

Map `getOrInsert()` and `getOrInsertComputed()`

JavaScript Map objects have become even more ergonomic with the addition of getOrInsert() and getOrInsertComputed(). These methods streamline the common pattern of checking if a key exists in a map and, if not, inserting a default value before returning it. getOrInsert() is useful for basic default values, while getOrInsertComputed() accepts a callback function. The callback is only executed if the key is missing, making it ideal for cases where the default value is computationally expensive to create.

Check out Map getOrInsert() on MDN.

Zstandard compression

Zstandard (or zstd) is now a Baseline Newly available option for HTTP Content-Encoding. Known for its high compression ratios and extremely fast decompression speeds, Zstandard offers a modern alternative to Gzip and Brotli. It is particularly effective across a wide range of data types, helping developers reduce the amount of data sent over the wire and improve page load times without taxing the user's CPU during the decompression process.

Explore the Content-Encoding header and Zstandard on MDN.

Baseline Widely available features

This month, an internationalization tool became Baseline Widely available.

The `dirname` HTML attribute

The dirname attribute is now Baseline Widely available. This attribute can be added to <input> and <textarea> elements to automatically capture the directionality (either ltr for left-to-right or rtl for right-to-left) of the text entered by the user. When the form is submitted, the browser sends an additional field—named after the value of the dirname attribute—containing the directionality. This is an essential feature for applications that support multilingual users, ensuring that the server receives the context necessary to display or process text correctly in its intended direction.

Find more details on the dirname HTML attribute on MDN.

That's a wrap

As usual, let us know if we missed anything Baseline-related, and we'll make sure it gets captured in a future edition! If you have any questions or want to provide feedback on Baseline, you can file an issue in our issue tracker.

New to the web platform in March

Fri, 27 Mar 2026 07:00:00 GMT

Discover some of the interesting features that have landed in stable and beta web browsers during March 2026.

Published: March 31, 2026

Stable browser releases

Chrome 146, Firefox 149 and Safari 26.4 released to stable during March. This post takes a look at the new features arriving on the platform this month.

Optional container query conditions

Both Firefox 149 and Safari 26.4 include support for name-only @container queries that have no conditions. This lets you match against containers based solely on their names, making it more straightforward to style elements based on container context without needing to specify size or style constraints.

Scroll-triggered animations

Chrome 146 adds scroll-position-based control of animations. This feature lets you create interactions declaratively with CSS, offloading work to a worker thread and improving performance. It also includes JavaScript interfaces for web animations. Learn more in CSS scroll-triggered animations are coming.

Browser Support

The `trigger-scope` property

Along with scroll-triggered animations, Chrome 146 introduces the trigger-scope property. This lets you limit the visibility of animation trigger names, helping to isolate animation-to-trigger interactions and avoid global name conflicts.

Browser Support

Popover `hint` value

Firefox 149 now supports the hint value for the popover global attribute. Popovers with the hint value won't close auto popovers when displayed, but will close other hint popovers, providing more fine-grained control over popover behavior.

Browser Support

Grid lanes

Safari 26.4 supports display: grid-lanes, this is the value of display that switches on a masonry style layout.

Browser Support

Math functions in `sizes` attribute

Safari 26.4 adds support for using the min(), max(), and clamp() math functions in the sizes attribute of <img> elements. This provides more flexibility for responsive image loading.

JavaScript iterator sequencing

Both Chrome 146 and Safari 26.4 now support iterator sequencing, introducing Iterator.concat(...items) to create iterators by sequencing existing ones. This feature is now Baseline Newly available.

Browser Support

Source

CloseWatcher interface

Firefox 149 adds support for the CloseWatcher interface. This allows developers to implement components that can be closed using device-native mechanisms, such as the Esc key on Windows or the Back key on Android, in the same way as built-in dialogs and popovers.

Browser Support

Source

Beta browser releases

Beta browser versions provide a preview of features that will be in the next stable browser release. You can test new features or removals that might affect your site before the stable release. New beta releases this month include Firefox 150 and Chrome 147.

Chrome 147 beta

Chrome 147 beta includes contrast-color()—a CSS function that returns either black or white depending on which provides the highest contrast against the argument color. Also included is border-shape and element-scoped view transitions.

Firefox 150 beta adds the CSS revert-rule keyword, customeElementRegistry for Elements and DocumentOrShadowRoot, and light-dark() for images.

January 2026 Baseline monthly digest

Mon, 02 Mar 2026 08:00:00 GMT

Published: March 2, 2026

Welcome to the January 2026 edition of the Baseline digest. Each month, we highlight the web platform features that have reached new milestones in Baseline, helping you understand what tools are ready to use in your projects today.

January was an exciting start to the year, with several significant APIs and CSS units moving into the Newly available category, along with a major layout improvement becoming Widely available.

Baseline Newly available features

The following web features became Baseline Newly available in January 2026.

Active view transition

The :active-view-transition CSS pseudo-class is now Baseline Newly available. This selector allows developers to target and style the root element of a document specifically while a view transition is in progress. This is particularly useful for applying global styles or adjustments that should only exist during the transition period, such as changing the background color of the transition overlay or adjusting the z-index of specific layers to ensure a smooth visual flow.

JavaScript modules in service workers

Service workers now support JavaScript modules across all major browser engines. By setting the type: 'module' option when calling navigator.serviceWorker.register(), you can use standard import and export statements within your service worker script. This brings service workers in line with modern JavaScript development practices, allowing for better code organization, easier dependency management, and the ability to share code between the main thread and the background worker.

Navigation API

The Navigation API provides a modern, purpose-built alternative to the legacy History API, specifically designed for the needs of single-page applications (SPAs). It offers a centralized way to initiate, intercept, and manage all types of navigation actions, including those triggered by the browser's back and forward buttons. With events like Maps, developers can implement smoother client-side routing with less boilerplate code. For a deeper dive into how this changes the way we build for the web, check out our dedicated blog post: Modern client-side routing: the Navigation API.

`rcap` CSS unit

The rcap unit is a root-font-relative length unit equal to the "cap height" (the nominal height of capital letters) of the root element's font. This allows for precise typographic layouts that scale relative to the primary typeface used on the site, rather than just the font size.

`rch` CSS unit

Similar to the ch unit but relative to the root element, the rch unit represents the width—or more specifically, the advance measure—of the "0" (zero) glyph in the root element's font. It is ideal for creating layouts that depend on character width, such as a container that should precisely fit a specific number of characters in the root font.

`rex` CSS unit

The rex unit is the root-relative version of ex, equal to the x-height of the root element's font. This unit is particularly useful for vertical alignment and sizing elements relative to the height of lowercase letters in your document's primary typography.

`ric` CSS unit

The ric unit is the root-relative counterpart to the ic unit. It is equal to the "ideographic" advance measure (typically the width or height of a CJK ideograph) of the root element's font. This is a vital tool for developers building internationalized layouts, particularly those using Chinese, Japanese, or Korean scripts.

Baseline Widely available features

The following web features became Baseline Widely available in January 2026.

Two value CSS `display` property

The multi-keyword syntax for the display property is now Baseline Widely available. This update lets you explicitly define both the "outer" and "inner" display types of a box. For example, instead of the precomposed inline-flex, you can use display: inline flex. This clarifies whether an element participates in block or inline flow (the outer type) and how its children are laid out (the inner type, like flex or grid). This change makes the CSS layout engine more logical and consistent for developers.

The `animation-composition` CSS property

The animation-composition property defines how multiple animations should interact when they affect the same property simultaneously. You can choose between replace, add, or accumulate, giving you precise control over how complex, layered animations are calculated.

Array by copy

JavaScript now includes methods that let you transform arrays without mutating the original data. Methods like toReversed(), toSorted(), and toSpliced() return a new, modified copy of the array, promoting a more functional and safer programming style.

Help us improve

New to the web platform in February

Thu, 26 Feb 2026 08:00:00 GMT

Discover some of the interesting features that have landed in stable and beta web browsers during February 2026.

Published: February 26, 2026

Stable browser releases

Chrome 145, Firefox 148, and Safari 26.3 released to stable during February. This post takes a look at the many new features this month, with several things becoming Baseline Newly available.

The `text-justify` CSS property

Chrome 145 adds full support for the text-justify CSS property. This property provides more control over text justification when you use text-align: justify.

Browser Support

Source

Column wrapping for multicol

Chrome 145 adds support for the column-wrap and column-height CSS properties from Multicol Level 2. This lets columns wrap onto a new row in the block direction, which helps avoid horizontal overflow and provides more flexibility in responsive design.

Learn more in Support for wrapped columns in multi-column layout.

Browser Support

Source

Customizable `<select>` listbox mode

Chrome 145 also includes the customizable <select> listbox rendering mode. This renders the select element in-flow or in the page, rather than with a separate button and popup.

The `shape()` CSS function

Firefox 148 adds the shape() CSS function by default. It lets you define custom shapes in properties like clip-path and offset-path using standard CSS syntax, to create and edit shapes with CSS units and math functions.

Browser Support

Source

Iterators in JavaScript

Firefox 148 introduces Iterator.zip() and Iterator.zipKeyed(). These static methods return a new iterator that groups input elements at each iteration step across multiple data sources.

Browser Support

Source

The HTML Sanitizer API

Firefox 148 now supports the HTML Sanitizer API. This lets you safely filter HTML before inserting it into the DOM, which helps reduce the risk of XSS attacks.

Browser Support

Source

Device Bound Session Credentials (DBSC)

Chrome 145 lets websites bind a user's session to their specific device using Device Bound Session Credentials (DBSC). This makes it significantly harder to use stolen session cookies on other machines.

Overflow on replaced elements

In Firefox 148, you can now use the overflow, overflow-x, and overflow-y CSS properties on replaced elements (for example, images or video) in the same way you use them with other elements.

The Origin API

Chrome 145 fills a gap in the platform by introducing an Origin object. This object encapsulates the origin concept and provides helpful methods, such as comparison, serialization, and parsing.

Zstandard (Zstd) compression

Safari 26.3 introduces support for Zstandard (Zstd). This compression algorithm makes website files smaller and improves loading speeds and efficiency. You can use Zstd for HTTP compression, which provides faster decompression and better compression ratios.

Browser Support

Source

Beta browser releases

Chrome 146 adds scroll-triggered animations in CSS and also includes the Sanitizer API. Firefox 149 includes popover="hint", the Close Watcher API, and the Reporting API.

Navigation API - a better way to navigate, is now Baseline Newly Available

Tue, 17 Feb 2026 08:00:00 GMT

Published: Feb 17, 2026

For over a decade, we've relied on window.history to build Single Page Applications (SPAs), and for over a decade, we've complained about it. The reason? It was never really designed for SPAs. To provide a seamless experience, SPAs must mimic standard multi-page navigation by manually tapping into the browser's history to support the back and forward buttons.

The History API alleviated some of these pain points, but not without its own shortcomings, like being unable to detect all different types of navigation triggers. Other notable limitations include the inability to read the full history stack, or edit non-current entries. The popstate event also behaves inconsistently, and doesn't trigger when pushState or replaceState are called programmatically.

That era ends now. The Navigation API is here, and it's finally becoming Baseline Newly available across all major browsers as of early 2026.

A side by side comparison

To illustrate the difference, this section compares how we've historically handled client-side routing versus the new, streamlined approach powered by the Navigation API.

The old way

// 1. Function to navigate programmatically
function navigate(path) {
  // Update the URL without a page refresh
  window.history.pushState({ path }, '', path);

  // Manually trigger the UI update
  renderContent(path);
}

// 2. Listener for browser navigation (Back/Forward buttons)
window.addEventListener('popstate', (event) => {
  // event.state contains the object we pushed in navigate()
  const path = event.state?.path || window.location.pathname;
  renderContent(path);
});

// 3. Mock UI renderer
function renderContent(path) {
  console.log(`Rendering UI for: ${path}...`);
}

// Example usage:
// navigate('/dashboard');

How the Navigation API works

// 1. One central listener for ALL navigation
// This catches: links, back/forward buttons, AND programmatic calls
navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url);

  // Intercept the navigation to prevent a full page reload
  event.intercept({
    async handler() {
      // The API handles the URL update; you just handle the UI
      await renderContent(url.pathname);
    }
  });
});

// 2. Mock UI renderer
async function renderContent(path) {
    console.log(`Rendering UI for: ${path}...`);
}

// Example usage:
// navigation.navigate('/dashboard');

Building a router with the History API felt like assembling a puzzle, since you had to:

Listen for clicks on <a> tags globally.
Call preventDefault() on them.
Manually call history.pushState().
Manually update your DOM.
Separately listen for the popstate event to handle the back/forward buttons.

If you forgot to handle one edge case, users might accidentally end up at the wrong view, highlighting its fragility.

The Navigation API radically simplifies this. It gives you a single, centralized NavigateEvent for every navigation—whether it's a user clicking a link, submitting a form, hitting the back button, or your code calling navigation.navigate().

The event.intercept() function does a lot of the heavy lifting for you:

Automatic URL updates: Handles updating the address bar and the history stack, without the need to call pushState.
Automatic accessibility: Handles accessibility primitives like focus management (restoring focus after navigation) automatically.
Centralized logic: Handles the back button and click events in the exact same function.

Some more use cases

We look at a few more examples in this section to highlight more ways the Navigation API can be leveraged.

Example: Handling a form submission

The navigate event automatically catches all same-document form submissions and provides a NavigateEvent.formData property to access the data.

This example captures a standard HTML form submission, prevents the page reload, and processes the data asynchronously.

// 1. One central listener handles links AND forms
navigation.addEventListener('navigate', (event) => {
  // Only handle form POST submissions in this block
  if (event.formData && event.canIntercept) {
    event.intercept({
      async handler() {
        const data = event.formData;
        console.log(`Submitting form data...`);

        const username = data.get('username');

        // Perform your async API call
        postFormData(data);

        // Update UI without a page refresh
        renderSuccessMessage(username);
      }
    });
  }
});

// 2. Standard HTML form (No JS 'onsubmit' needed!)
// <form action="/login" method="POST">
//   <input name="username" type="text" required />
//   <button type="submit">Login</button>
// </form>

Example: Handling async scrolling

In the Navigation API, event.scroll() gives you manual control over when the browser restores scroll position during a navigation.

By default, the browser tries to restore scroll position as soon as event.intercept() is called. However, in modern SPAs, the content often isn't ready yet (you might be waiting for an API response). If the browser scrolls before the content is rendered, it will land in the wrong place or stay at the top.

Imagine a user clicks the back button to return to a long list of items. We will need to fetch those items before the page is long enough to go to the end.

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;

  event.intercept({
    // Tells the browser: "I will handle the scroll timing manually"
    scroll: 'manual',

    async handler() {
      // 1. Fetch data and render it
      const data = await fetchListData();
      renderItems(data);

      // 2. Now that the items are in the DOM and the page has height,
      //    we can move the scrollbar to the saved position (for back/forward)
      //    or to the top (for new navigations).
      event.scroll();
    }
  });
});

Example: Enabling view transitions

The Navigation API and View Transitions API are designed to work together to create seamless, "app-like" transitions in SPAs.

While intercepting a navigation event, we can wrap the DOM updates in a document.startViewTransition(). This tells the browser to capture a snapshot of the "old" state, perform the required DOM changes, and then animate to the "new" state. This can allow us to support app-like transitions!

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;

  const url = new URL(event.destination.url);

  event.intercept({
    async handler() {
      // 1. Fetch the new content first (optional but recommended)
      const content = await fetchNewPageContent(url.pathname);

      // 2. Start the view transition
      document.startViewTransition(() => {
        // 3. Update the DOM inside the callback
        // The browser snapshots the old UI before this and the new UI after
        document.getElementById('app').innerHTML = content;
      });
    }
  });
});

In summary

As seen with the preceding examples, the Navigation API fixes deep architectural issues with navigating SPAs, a long-standing pain point among many web developers. It is built-in, safe, and handles edge cases robustly.

As of early 2026, with support landing in Safari and Firefox, the Navigation API is ready for prime time. It's the router we always wanted—simple, powerful, and built for the modern web.

Interop 2026: Continuing to improve the web for developers

Thu, 12 Feb 2026 08:00:00 GMT

Published: February 12, 2026

We're excited to announce Interop 2026, an effort to increase the interoperability of key features of the web platform across browsers. Run by a team of representatives from companies that make substantial contributions to browser rendering engines—including Apple, Google, Igalia, Microsoft, and Mozilla—Interop 2026 focuses on features that are high-priority for web developers and end users.

Consistent with earlier Interop efforts, selected tests will be continuously run on automated testing infrastructure, with pass rates displayed on the Interop 2026 dashboard.

Focus Areas

The focus areas for 2026 include several areas identified as top interop issues in the State of HTML and State of CSS surveys. We track these issues on webstatus.dev. Many features included this year also appear in the top 20 requested issues in the developer signals repository.

Anchor positioning

Appears in: Top interop issues, developer signals anchor positioning

Anchor positioning lets you place an element based on the position of another element, such as placing a tooltip next to the content it references. This focus area continues from Interop 2025 and includes only the tests from 2025.

Container style queries

Appears in: Top interop issues, developer signals container style queries

Container style queries apply styles to an element based on the computed values of custom properties of its container, using the @container at-rule together with one or more style() functions.

Dialogs and popovers

Appears in: Top interop issues, developer signals closedby, hint

For Interop 2026, work on the <dialog> element and Popover API focuses on:

The <dialog closedby> attribute, which sets the user actions that close a dialog (for example, clicking outside the dialog).
The :open CSS pseudo-class, which matches elements that have open states.
The popover="hint" global attribute, which creates a popover subordinate to other auto popovers, useful for tooltips.

Scroll-driven animations

Appears in: Top interop issues

This includes the animation-timeline, scroll-timeline, and view-timeline CSS properties, which advance animations based on the user's scroll position.

View transitions

Appears in: Top interop issues, developer signals Cross-document view transitions

Interop 2025 brought same-document view transitions to Baseline Newly available. For Interop 2026, the view transitions work focuses on:

Improving same-document view transitions.
The blocking="render" attribute for <link>, <script>, and <style>.
The <link rel="expect"> attribute.
The :active-view-transition-type() CSS pseudo-class.
Cross-document view transitions.

The `attr()` CSS function

Appears in developer signals attr()

The attr() CSS function returns the value of an attribute of an HTML element, with the option to return that value as a specific type or with a specific unit.

As well as these key features highlighted by you in the surveys, Interop 2026 includes:

The `contrast-color()` CSS function

The contrast-color() CSS function selects a color that has guaranteed contrast against a specified foreground or background color.

Custom highlights

Custom highlights let you style arbitrary text ranges without adding extra elements to the DOM.

Fetch uploads and ranges

Work on the fetch() method focuses on ReadableStream in the body to stream data to the server, supporting FormData and media types for requests and responses, and supporting the Range header.

IndexedDB

The IndexedDB focus area targets the getAllRecords() methods of IDBObjectStore and IDBIndex. These methods speed up read operations on large datasets by returning records and their primary keys in batches.

JSPI for Wasm

The JavaScript Promise Integration API (JSPI) lets Wasm applications that expect synchronous access to external functionality work in an environment where that functionality is asynchronous.

Media pseudo-classes

This area includes the :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes, which match <audio> and <video> elements based on their state.

Navigation API

This year, the work will focus on continuing to improve the interoperability of the Navigation API, and on the precommitHandler option to navigateEvent.intercept(), which defers the commit until a handler has resolved.

Scoped custom element registries

The CustomElementRegistry() constructor creates a new custom element registry separate from the global one, letting multiple custom elements with the same tag name coexist.

Scroll snap

This focus area covers CSS scroll snap, which controls panning and scrolling behavior within a scroll container.

The `shape()` CSS function

The shape() CSS function creates shapes using commands like line, move, and curve, and can be used with clip-path and shape-outside.

Web compat

This area targets specific interoperability issues that cause real-world problems, including:

ESM module loading.
The timing of scroll events relative to animation events.
Unprefixing the -webkit-user-select property.

WebRTC

For Interop 2026, work focuses on fixing the remaining failing tests from the Interop 2025 focus area and continuing to improve WebRTC interoperability.

The WebTransport API

This area covers the WebTransport API, which transmits data between a client and server using the HTTP/3 protocol.

The `zoom` CSS property

Continuing from Interop 2025, this area focuses on the zoom CSS property, which scales the size of an element and affects page layout.

Investigation efforts

Interop 2026 also includes investigation efforts to prepare future features for testing and interoperability work:

Accessibility testing: Working to generate consistent accessibility trees across browsers and improving WPT infrastructure.
JPEG XL: Focusing on making the JPEG XL image format testable, including defining requirements for progressive rendering.
Mobile testing: Improving WPT infrastructure to test mobile-specific features like dynamic viewport changes.
WebVTT: Fixing tests and updating documentation to improve understanding of standard conformance.

Track progress through 2026

Follow along with the project on the Interop 2026 dashboard.

Other announcements

Start our latest course, Learn AI!

Thu, 05 Feb 2026 08:00:00 GMT

Published: February 5, 2026

We know, AI is everywhere. Every company is touting new AI features, integrations, and more. There's hundreds, if not thousands of models to choose from, everyone is competing for your attention. How do you make those choices?

Introducing our new course that aims to answer those questions: Learn AI. This course was written by Dr. Janna Lipenkova, author of the Art of AI Product Development, with a welcome message from Alexandra Klepper.

This is web.dev, which means our course is written for web developers. We don't get into the weeds of the mathematical principles and algorithms behind building your own model. Instead, we offer structures to support your technical leadership, building a responsible system for successful features.

We recommend you take this course in order, as the introduction lays a foundation of AI system blueprints: how do you build a system, where do you build it, and what problems does it solve?

Discover some new best practices and build your expertise in thoughtful AI deployment.

Start learning

New to the web platform in January

Fri, 30 Jan 2026 08:00:00 GMT

Discover some of the interesting features that have landed in stable and beta web browsers during January 2026.

Published: January 30, 2026

Stable browser releases

Chrome 144 and Firefox 147 released to stable during January. This post takes a look at the many new features this month, with several things becoming Baseline Newly available.

CSS Anchor Positioning

Firefox 147 includes support for CSS Anchor Positioning, making this feature Baseline Newly available. This API lets you position elements relative to other elements, known as anchors. This is useful for tooltips, menus, and popovers, where you want an element to be positioned relative to another element on the page.

Browser Support

Source

The Navigation API

Also becoming Baseline Newly available with Firefox 147 is the Navigation API. This API provides a modern way to initiate, intercept, and manage navigations in your application.

Browser Support

Source

Find-in-page styling with `::search-text`

Chrome 144 includes the ::search-text pseudo-element. This feature exposes find-in-page search result styling to authors as a highlight pseudo-element, similar to ::selection and ::spelling-error. This lets you customize the appearance of search results when a user uses the browser's find-in-page functionality.

Find out more on the Igalia blog in Find-in-Page Highlight styling.

Browser Support

Source

The `<geolocation>` element

Chrome 144 introduces the <geolocation> element, a declarative, user-activated control for accessing the user's location. It streamlines the user and developer journey by handling the permission flow and directly providing location data to the site, often eliminating the need for a separate JavaScript API call.

Learn more in Introducing the HTML <geolocation> element.

Browser Support

Source

The Temporal API

Chrome 144 includes the Temporal API. This provides standard objects and functions for working with dates and times. This is a significant addition to JavaScript, offering a robust and modern replacement for the Date object.

Browser Support

Source

CSS `caret-shape`

Chrome 144 introduces the caret-shape property, which lets you specify the shape of the text insertion caret. You can choose between auto, bar, block, and underscore.

Browser Support

Source

View Transition enhancements

Firefox 147 includes identifying view transition types. These provide a mechanism by which different types can be specified for active view transitions. CSS can then be used to apply animations to DOM elements when their content updates, depending on the transition type specified. Firefox 147 adds support for single-page app (SPA) view transition types only, not cross-document view transition types.

Browser Support

Source

Firefox also now supports the activeViewTransition property on the Document interface, which returns the ViewTransition object for the active transition.

Browser Support

Source

Beta browser releases

Chrome 145 includes the text-justify property to control justification methods, and improvements to multi-column layout with column-wrap and column-height. It also brings the onanimationcancel event to GlobalEventHandlers. Additionally, customizable <select> is extended to listboxes.

Firefox 148 includes support for Location.ancestorOrigins, allowing you to determine if a document is embedded in an <iframe> and by which sites.

December 2025 Baseline monthly digest

Mon, 26 Jan 2026 08:00:00 GMT

Published: January 26, 2026

As expected, December 2025 was a bit of a slow month for Baseline with the developer community taking some well-deserved time off to decompress for the year's end. While this will be a quick update compared to other months in 2025, there are still plenty of highlights!

Baseline Newly available features

The following features became Baseline Newly available in December of 2025. As a result, all of these features will become Baseline Widely available in July of 2028.

`document.caretPositionFromPoint()`

document.caretPositionFromPoint() is a helpful method for finding the precise insertion point (DOM node and offset) for given viewport coordinates. This method reduces the guesswork that was often involved in finding the position of the caret in the document.

Event Timing API

The Event Timing API is used to detect interactions with the document, and can be used to calculate the latency of user interactions. This API is used to calculate the Interaction to Next Paint (INP) Core Web Vital metric. Now that this API is Baseline Newly available, it's possible to calculate the INP metric across all of the core browsers, and when it eventually reaches Baseline Widely available, it will be possible to calculate this important user-centric metric across even more browsers in use for Real User Monitoring (RUM) purposes.

Largest Contentful Paint API

Largest Contentful Paint (LCP) is a Core Web Vital metric that calculates when the largest piece of content in the document is rendered. Now that the Largest Contentful Paint API is Baseline Newly available—and will cover even more users as it reaches Baseline Widely available—it will be possible to calculate this important user-centric metric as experienced by real users for data collection purposes.

CSS `scrollbar-color`

Styling scrollbars consistently across browsers was previously impossible. Now that the CSS scrollbar-color property is Baseline Newly available, you have access to a better method for styling the document's scrollbar color.

`scrollend` event

The scrollend event provides a reliable way to detect when a scroll operation has finished, replacing messy setTimeout hacks. The introduction of this feature as Baseline Newly available means that users will be able to detect when scroll operations are complete in a way that doesn't compromise performance and readability of code through the use of setTimeout callbacks.

CSS `@scope`

The CSS @scope at-rule makes it easier for you to target elements in document subtrees in a way that reduces the need for complex selectors. With @scope becoming Baseline Newly available, you now have a robust tool for scoping styles.

Math font family

If you've ever had to display mathematical equations on a page, you’ll know that such content has specific rendering needs. With font-family: math becoming Baseline Newly available, you’ll no longer need to use hacks to display mathematical equations.

Invoker commands

Invoker commands are useful for assigning behaviors to <button> elements on a page. In particular, they're useful for controlling the use of dialogs and popovers, and help you to handle many of the underlying requirements for using these APIs, such as accessibility concerns. To see how these work, read <dialog> and popover: Baseline layered UI patterns, an entry in our recently debuted Baseline in action series.

Baseline Widely available features

A few features recently became Baseline Widely available in December of 2025, meaning that these features are now considered to be broadly usable in all major browsers.

`calc()` keywords

As calc() performs mathematical operations in CSS, it became more necessary to introduce keywords for commonly used mathematical formulas. The e, pi, infinity, and NaN keywords represent well-defined constants accepted in CSS math functions in calc().

JavaScript modules in workers

Web workers exist in their own scope by design, and are instantiated through the Worker() constructor. The ability to use the { type: "module" } argument when starting up a web worker allows you to use ES modules in the worker scope, giving you access to import and export. With this functionality now reaching Baseline Widely available, you'll be able to use this feature across more of the browsers in use today.

`window.print()`

While window.print() is a well-established web feature, the cross-browser Baseline Widely available clock for certain modern implementations of the print dialog completed this month, allowing it to be used more reliably across more browsers in use.

That's a wrap

With the end of 2025 behind us, we're beginning a new year with Baseline in 2026! As usual, let us know if we missed anything Baseline-related, and we'll make sure it gets captured in a future edition!

LCP and INP are now Baseline Newly available

Wed, 17 Dec 2025 08:00:00 GMT

Published: December 17, 2025

With the release of Safari 26.2 on December 12th, web performance got a fantastic end of year gift with Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) becoming Baseline Newly available as the latest version of all major browsers now include the Largest Contentful Paint API and Event Timing API needed to measure these metrics. This was part of the Interop 2025 project, and it's great to see these delivered this year!

What this means

The Core Web Vitals have become a widely adopted standard for measuring web page experience both for web developers and with business stakeholders. They attempt to summarize the complex story of web performance into a number of key measures of how fast a page loads (LCP), how quickly it responds to interactions (INP), and how stable its contents are (CLS).

For a long time, these were only measurable in Chromium-based browsers such as Chrome and Edge. They were also not available at all on iOS devices where all browsers use the WebKit browser engine that powers Safari. This causes a blindspot where large proportions of a site's visitors may be having a very different experience without a site's knowledge. While many web performance improvements do benefit all browsers, some techniques and APIs are only available in some browsers. Additionally, the way browsers work internally, load pages, and handle interactions can be different from one another. Having only a partial view of your site's performance is far from ideal.

With all major browsers now supporting two of these metrics, we can now have a better view on the key loading and interactivity of a website. This will allow site owners to better understand performance issues and identify any improvements they can make, ultimately benefiting users and business metrics.

Will data from other browsers feed CrUX?

No. The Chrome User Experience Report (CrUX) is only based on eligible Chrome users and this won't change. This applies also to downstream systems that use this data like PageSpeed Insights, Google Search Console, and CrUX Vis.

This will also continue to exclude Chrome iOS users since they use the WebKit browser engine.

How to measure from other browsers

CrUX data is still useful as a summary of a site's performance, and to benchmark against other sites on the web. However, as it is a high-level summary, we have long recommended measuring more detailed field data to help identify and improve performance.

Real User Monitoring (RUM) tools are now able to collect the additional field data, including those measured through the web-vitals library from the Chrome team. In most cases, this should automatically start to be included though your existing solutions, but check with your RUM provider if you have any questions.

Be aware that there can be differences in RUM and CrUX, and that is potentially even more true now these metrics are available in even more browsers that are not included in CrUX.

Are there any differences in the implementations?

While all browser engines do broadly the same task in loading and displaying web pages, there are many differences in how these browsers are built, and in particular in their rendering pipelines that translate a website's code (primarily HTML, CSS, and JavaScript) into pixels on the screen.

The end of the rendering loop is broadly interoperable and is defined as the paintTime. However after this, there is a later presentationTime which is implementation-specific and aims to indicate when the pixels are actually drawn on the screen. Chrome measures LCP up until the end of presentationTime, while Firefox and Safari don't include presentationTime and so measure until the earlier paintTime. This results in slight milliseconds of difference between the measures. From Chrome 145, the paintTime measure will also be exposed for LCP for those that want to be able to compare like for like across browsers.

The same difference applies to INP as well.

The fact that other browsers have implemented these metrics, has helped identify some outstanding issues to be clarified and better defined. This again may lead to slight differences—though these are mostly in edge cases. This is the benefit of having multiple implementations and eyes on an API! We will continue to work on these as well as any other improvements to the metrics.

However, despite these small differences, we are confident that LCP and INP are broadly interoperable, so we are happy with them being labelled Baseline Newly available. Those implementing RUM solutions or digging deep into the data may notice some of these differences, but web developers should be confident in measuring these metrics across browsers despite these minor differences.

What about browsers that don't support these APIs?

Baseline Newly available features are only just available in the latest versions of all major browsers. Your user base may not immediately upgrade, or may not be able to upgrade depending on their operating system and provider. After 30 months, they will be considered Baseline Widely available as most users will likely be on supporting browsers.

However, as a measurement API rather than a core functionality of a website, you can safely measure these metrics for supporting browsers—as you've likely done up until now. Just be aware that you may be seeing a filtered view of your users—those who upgraded—particularly in the first few months.

What about Cumulative Layout Shift?

The third Core Web Vital is Cumulative Layout Shift (CLS), and is not part of the Interop 2025 project—though it has been proposed for Interop 2026. For now, it is not supported beyond Chromium-based browsers.

Conclusion

The Web Vitals initiative's aim was to improve web performance by creating a set of standard APIs for the web platform to allow key metrics to be measured and broadly understood by website owners. It's great to see two of these metrics now being supported by all main browsers. We look forward to seeing what insights these provide website owners, and how this leads to improved user experiences!

New to the web platform in December

Tue, 16 Dec 2025 08:00:00 GMT

Discover some of the interesting features that have landed in stable and beta web browsers during December 2025.

Published: December 16, 2025

Stable browser releases

Chrome 143, Firefox 146 and Safari 26.2 released to stable during December. This post takes a look at the many new features this month, with several things becoming Baseline Newly available.

The `@scope` CSS at-rule is now Baseline

Firefox 146 includes the @scope CSS at-rule which lets you select elements in specific DOM subtrees. Define a scope inside which selectors can target elements, and you avoid overly specific and lengthy selectors. For example, the following CSS only targets <img> elements if they are inside an element with a class of .card.

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

With Firefox 146, this useful at-rule is now Baseline Newly available. Learn more about it in Limit the reach of your selectors with the CSS @scope at-rule.

The `contrast-color()` CSS function

Also in Firefox 146 is the contrast-color() function. This function takes a color value and returns a contrasting color, which aims to ensure WCAG AA minimum contrast.

For more examples see How to have the browser pick a contrasting color in CSS on the WebKit blog.

Browser Support

Source

Firefox is the first browser to ship the text-decoration-inset property. This property lets you adjust the start and end points of an element's text decoration so it can be shortened, lengthened, or have its position shifted with respect to the rendered text.

Browser Support

Source

The `font-language-override` CSS property

Chrome 143 includes the font-language-override property. This lets you override the typeface behavior for a specific language. This is useful if you are using a typeface that doesn't have proper support for a language, you could opt to use glyphs from a similar language with better support.

Browser Support

Source

CSS anchored fallback container queries

Chrome 143 introduces @container anchored(fallback) to style descendants of anchor positioned elements based on which of position-try-fallbacks is applied.

Such queries can be used to style an anchored element's tether or its animations, based on how the anchor and the anchored element are positioned relative to each other.

Browser Support

Side-relative syntax for `background-position-x/y` longhands

Also in Chrome, and now available across all browsers, is the ability to Define the background image's position relative to one of its edges in the longhand properties for background-position. For example:

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: left 30px;
  background-position-y: bottom 20px;
}

Browser Support

The animation `overallProgress` property

Safari 26.2 includes overallProgress. This read-only property of the Animation interface returns a number between 0 and 1 indicating the animation's overall progress towards its finished state.

This property is now Baseline Newly available.

Browser Support

Source

LCP and INP are now Baseline Newly available

The Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) metrics are now Baseline Newly available, with support in Safari 26.2 for the Contentful Paint API and Event Timing API needed to measure these metrics.

These features were included in Interop 2025, and you can now measure these metrics in the latest version of all major browsers.

Largest Contentful Paint API

Browser Support

Source

Event Timing API

Browser Support

Source

CHIPS reaches Baseline Newly available

Safari 26.2 also includes CHIPS (Cookies Having Independent Partitioned State), which lets you opt a cookie into partitioned storage, with a separate cookie jar per top-level site.

Browser Support

`hidden="until-found"`

Safari 26.2 includes support for hidden="until-found", which now becomes Baseline Newly available.

Browser Support

The `command` and `commandfor` attributes

Also for HTML in Safari 26.2 is support for command and commandfor on buttons. This provides a declarative way to control popovers and dialogs.

Browser Support

Source

Find out more in Introducing command and commandfor.

The `scrollend` event

Another feature becoming Baseline Newly available with Safari 26.2 is the scrollend event. This event fires when scrolling completes, find out more about it in Scrollend, a new JavaScript event.

Browser Support

Source

The `scrollbar-color` property

The scrollbar-color property lets you change the color of the scrollbar thumb, and the scrollbar track. With Safari 26.2 this also becomes Baseline Newly available.

Browser Support

Source

Beta browser releases

Chrome 144 includes the ::search-text pseudo-element for find-in-page search result styling and scrolled support for @scroll-state letting you style descendants of containers based on the most recent scrolling direction. Also included is the Temporal API, with standard objects and functions for working with dates and times.

Firefox 147 is an exciting release that includes CSS anchor positioning, view transition types, and the Navigation API.

For more on exciting CSS and UI features that landed this year, check out CSS Wrapped 2025.

Vote for the web features you want to see

Thu, 11 Dec 2025 08:00:00 GMT

Published: December 11, 2025

Have you ever found yourself checking Can I Use, seeing all that red for a feature you're dying to use, and wishing you could just poke the browser vendors and say, "Hey, I need this!"?

Well, now you can.

The WebDX Community Group is launching a new way for you to directly signal which web features are most important to you. Now, you can upvote the features you want to see become interoperable across major browsers.

Starting today, you can find these upvotes integrated here on web.dev as well as caniuse.com and webstatus.dev. Other platforms like MDN are investigating similar integrations.

How it works

When you're looking up browser support for a feature, keep an eye out for the "Upvote" button. For example, here's the widget for the :has-slotted feature:

Clicking that button will take you to a specific issue in the web-platform-dx/developer-signals repository on GitHub, where most Limited availability features are tracked. From there, casting your vote is quick: just add a 👍 reaction to the issue description.

More than just a thumbs up

A thumbs up shows demand, but context drives understanding. If a feature is critical to your workflow, we want to know why.

Are you relying on a heavy polyfill? Are you hacking together a workaround that breaks accessibility? Or are you just avoiding the feature entirely because support is spotty?

Leave a comment on the issue sharing your specific use case. Browser engineers read these to understand the real-world friction you're facing.

"Wait, didn't I just do this for Interop 2025?"

If you've participated in the Interop selection process or the State of HTML/CSS/JS surveys, this might sound familiar. Those annual traditions aren't going anywhere. Instead, this new channel is designed to augment that data in a more evergreen way:

Always on: Interop proposals and annual surveys happen during a specific window. This new signal channel is open year-round. You can vote the exact moment you hit a roadblock, not months later when you might have forgotten about it.
No resets: Unlike Interop, where proposals often reset annually, your votes here roll over. If a feature doesn't get picked up immediately, your signal persists and continues to grow over time.
Zero friction: Nearly every non-Baseline feature already has a tracking issue. You don't need to write a formal proposal or spec; you just need to click a button.

Does the feature with the most votes win?

That would be fun, but no—browser development isn't a popularity contest.

Browser vendors have to balance a massive number of factors: security, privacy, architectural complexity, device constraints, and existing standards positions.

However, developer demand is a huge factor in prioritization. When vendors are deciding what to put on their roadmap, being able to point to a feature and say, "lots of developers are actively asking for this," moves the needle.

For a great example of this, Chrome recently announced how developer signals like these factored into the decision to welcome JPEG XL contributions in Chromium:

Since JPEG XL was last evaluated, Safari has shipped support and Firefox has updated their position. We also continue to see developer signals for this in bug upvotes, Interop proposals, and survey data[...] Given these positive signals, we would welcome contributions to integrate a performant and memory-safe JPEG XL decoder in Chromium.

Rick Byers, on behalf of Chrome tech leads in the Intent to Prototype: JPEG XL thread on blink-dev

Start voting today

This is your chance to help shape the web platform.

Keep an eye out for the upvote buttons on sites like web.dev, webstatus.dev, and caniuse.com.
Click the buttons or head directly to the developer-signals repo to browse open features.
Vote (👍) and Comment on the features that matter to you.

Just remember to follow the Code of Conduct, stay on topic, and be kind to one another. We're all building the web together—let's make sure we're building the parts that matter most.

November 2025 Baseline monthly digest

Tue, 09 Dec 2025 08:00:00 GMT

Published: December 9, 2025

While everything tends to slow down as the year begins to wrap up, there's still plenty of Baseline news in this edition of this monthly digest to cover, so let's get started.

Next.js adopts current `baseline widely available` browsers

Next.js is a widely-used React framework It carries considerable influence not just in how developers might choose to develop for the web, but also the browsers developers might choose to develop for.

Recently, Next.js updated its default browser support criteria to a current evaluation of the baseline widely available Browserslist query. As time goes on, Next.js instances that update to include this change stand to benefit from fewer polyfills and transforms, and a larger number of web features that developers will be able to use safely in their applications.

Baseline in action

Baseline in action is a series of articles with accompanying demos that show you how to use a mix of Baseline web features to build common user interface elements. We've started the series with concepts such as container queries, Baseline features you could use to build an image gallery, and <dialog> and popover. More articles and demos will be added throughout the end of this year and 2026. For more information, read the Baseline in action announcement.

New Baseline case studies

We're happy to announce that two Baseline case studies were published in November:

Both of these case studies offer a look into the process of redefining browser support criteria inside of professional developer teams. This has never been an easy problem to solve. Large and consequential decisions such as which browsers to support during development require buy-in from project stakeholders. Baseline helps to make this decision easier—and these case studies show you how others have adopted it.

Features that became Baseline in November

Features become Baseline Newly or Widely available regularly. In November, the following features became Baseline Newly available:

Atomics.waitAsync

The features that became Baseline Widely available in November was more considerable:

That's a wrap

With November in the books, we're closing in on the end of 2025! As usual, let us know if we missed anything Baseline-related, and we'll make sure it gets captured in a future edition!

Announcing Baseline in action

Tue, 02 Dec 2025 08:00:00 GMT

Published: December 2, 2025

Here in Chrome Developer Relations, we've been talking a lot about Baseline these days, from the arrival of new web interoperable features all the way to the tooling that's implementing Baseline. However, we've not spent much time showing you how these features can all come together to help you build modern user experiences on the web without worrying about browser compatibility. Today, we're excited to announce the arrival of a new series to help you do just that: Baseline in action!

We've joined forces with OddBird to bring you Baseline in action. This series shows you demos of various Baseline features used together for different use cases, and are paired with articles that go deep into detail on these features. We have three demos available at this time:

These demos are only the start. As time goes on, we'll be working with the talented people at OddBird to release additional articles and demos in this series for the rest of 2025 and into 2026. We hope these demos inspire you to pick up features that are now Baseline. Check out Baseline in action today!

New to the web platform in November

Wed, 26 Nov 2025 08:00:00 GMT

Discover some of the interesting features that have landed in stable and beta web browsers during November 2025.

Published: November 26, 2025

Stable browser releases

Firefox 145 and Safari 26.1 released to stable during November, this post takes a look at what that means for the web platform.

Safari 26.1

This release of Safari is mostly a release that fixes bugs and compatibility issues with existing features.

There's a couple of additions with support for relative units in SVG, and support for remembering the last successful position-try fallback in CSS anchor positioning to reduce layout jumps when styles change.

`Atomics.waitAsync()`

Firefox 145 now supports the Atomics.waitAsync() static method. This method allows synchronization of threads based upon the value in a shared memory location. It waits asynchronously for the value and returns an object representing the operation's result. With this release, it's now Baseline Newly available.

Browser Support

Source

The `ToggleEvent` `source` property

Firefox also supports the source property of the ToggleEvent interface. If a popover is triggered to open or close by an HTML element such as a <button>, the event's source property will contain the element that triggered the popover.

Browser Support

Source

The `Integrity-Policy` and `Integrity-Policy-Report-Only` HTTP headers

The Integrity-Policy and Integrity-Policy-Report-Only HTTP headers are supported in Firefox for script resources. These allow websites to enforce subresource integrity guarantees for scripts.

Browser Support

Source

Beta browser releases

Firefox 146 includes the CSS contrast-color() function and the display-p3-linear color space in <color>. Also included is the CSS @scope at-rule letting you select elements in specific DOM subtrees, which will become Baseline Newly available.

Safari 26.2 is shaping up to be a release full of new features for the browser. It includes the CSS random() function, along with the field-sizing property. hidden=until-found is also included, as are the command and commandfor attributes on buttons.

WebGPU is now supported in major browsers

Tue, 25 Nov 2025 08:00:00 GMT

Published: November 25, 2025

Big news for web developers and users. WebGPU—the powerful API for running high-performance 3D graphics and general-purpose GPU computations—is officially supported across Chrome, Edge, Firefox, and Safari. This means the future of high-end, in-browser experiences like AAA gaming, complex 3D modeling, and advanced AI applications is now!

This significant milestone results from years of extensive collaborative development by the W3C GPU for the Web Working Group, with contributions from companies including Apple, Google, Intel, Microsoft, and Mozilla.

Why WebGPU matters

WebGPU isn't just a replacement for WebGL; it's a massive leap forward, offering a cleaner, more performant interface designed from the ground up for the modern web. It includes an idiomatic JavaScript API and a modern text-based shader language.

WebGPU unlocks a new era of high performance computing and graphics on the web, offering direct access to modern GPU features that were previously constrained by older APIs like WebGL. Its primary use cases are advanced 3D graphics and rendering, enabling richer, more realistic gaming experiences, complex data visualizations, and sophisticated editing tools right in the browser. Crucially, it also unlocks GPU-accelerated general-purpose computation through its compute pipeline. This massively improves performance for tasks like machine learning inference and training (running workloads like large language models), video processing, physics simulations, essentially bringing desktop-class performance to computationally intensive applications on the web.

Both ONNX Runtime and Transformers.js already use WebGPU to enable high-speed, local model inference and computation into the browser. This advancement unlocks new possibilities for developing high-performance, web-based AI applications.

WebGPU also introduces Render Bundles, a powerful feature that lets developers record and reuse sets of rendering commands for improved performance and reduced CPU overhead. Babylon.js' Snapshot Rendering, which uses GPU Render Bundles, can help render scenes approximately 10 times faster.

Browser and OS availability

Browser Support

Source

WebGPU is available on the following browsers and operating systems:

Chrome, Edge, and other Chromium-based browsers:

WebGPU is available on Windows (with Direct3D 12), macOS, and ChromeOS starting with Chrome and Edge version 113.

Support for Android was added in Chrome version 121 for devices running at least Android 12, and with Qualcomm/ARM GPUs.

Support for Linux and expanded support for existing platforms is in progress.
Firefox:

WebGPU is available on Windows as of Firefox 141.

WebGPU is available in macOS Tahoe 26 on ARM64 machines, as of Firefox 145.

Support for Linux, Android, and Intel-based Macs is in progress.
Safari:

WebGPU is available in macOS Tahoe 26, iOS 26, iPadOS 26, and visionOS 26.

For more updates on the WebGPU availability, including what platforms it's rolling out on, refer to the WebGPU Implementation Status page.

A growing ecosystem

You don't have to start from scratch to use WebGPU! The libraries you love already support WebGPU:

Plus, the underlying engines—Dawn (Chromium) and wgpu (Firefox)—are standalone, portable packages. They simplify cross-platform development, making it incredibly straightforward to bring platform-specific GPU apps over to the web by using Wasm and tools like emscripten and Rust web-sys.

The future of high-performance web apps is now!

Acknowledgements

Sincere gratitude to all the contributors for their invaluable input and collaboration. Special thanks to: Corentin Wallez, Jim Blandy, Ken Russell, Mike Wyrzykowsk, Nishitha Burman Dey, Patrick Brosset, Sebastien Vandenberghe, Thomas Lucchini, and Thomas Nattestad.

October 2025 Baseline monthly digest

Tue, 11 Nov 2025 08:00:00 GMT

Published: November 11, 2025

As we get closer to the end of the year, another month has come and gone—and with it, many interesting developments around Baseline occurred in October. If you missed anything, this edition will get you caught up.

Baseline regression on top-level `await`

A notable issue surfaced in a regression related to the top-level await implementation in Safari. Top-level await lets you use the await keyword at a top-level context outside of an async function. This is having an effect on developers relying on the feature for asynchronous module loading.

For Baseline, this means that top-level await has regressed from Widely available to Limited availability. For more information on when this change occurred, the pull request to revert the feature's status can give you more information, and you can expect to hear more about this issue in future Baseline content here on web.dev.

Baseline Newly and Widely available features

The following features became Baseline Newly available in October:

Of these two, same-document view transitions landing as Newly available is a big moment for web developers, meaning that more and more of the view transitions API is becoming interoperable. Additionally, we recently published a post on URLPattern becoming Newly available that was authored by YouTube's Jay Rungta.

And, because time never stops, the following features became Baseline Widely available in October:

The HTML inert attribute
The HTML <canvas> element roundRect method
The HTML <canvas> element createConicGradient method

The Baseline Hackathon concludes

Back in September of 2025, the Chrome Developer Relations team kicked off the Baseline Hackathon, which concluded in October. There were 3,000 applicants total, and hundreds of projects submitted all vying for a shot at the $10,000 prize pool.

The hackathon once again proved that the web developer community is both inventive and tenacious when it comes to delivering useful tools—and it wasn't easy to filter through all the tools we saw produced for the Baseline Hackathon to select the winners. Eventually, three winners were selected—and we think you'll find what useful Baseline tools they built. To see the full gallery of eligible submissions, take a look at the full project gallery.

Windsurf IDE now supports Baseline

In October, Windsurf—a popular web development IDE derived from Visual Studio Code—released a significant update. As of version 1.100, Windsurf now has built-in Baseline support. This means that Windsurf users will benefit from seeing Baseline compatibility information whenever they hover over HTML and CSS features within their code.

This integration helps streamline the development workflow and reduces the need for context switching when checking web feature support. This functionality ships as a core part of Windsurf, and no additional packages need to be installed to benefit!

"Web dev and web design" Discord community Baseline bot

The "web dev and web design" Discord community has developed and launched a bot capable of quickly looking up the Baseline status of any web feature. This new tool is already proving useful for developers seeking instant compatibility checks and fostering a more informed discussion around web standards within the community.

Web developers switch between many contexts—including those that include chat applications—and the ability for developers to get the information they need within as many of them can be helpful. In this case, developers participating in this Discord community will be able to check web feature interoperability as part of their discussions.

That's a wrap

That's another eventual month down in 2025 for Baseline—and as the holidays approach, this may be the last Baseline digest with significant developments. As usual, let us know if we missed anything Baseline-related, and we'll make sure it gets captured in a future edition. See you soon!

New to the web platform in October

Thu, 30 Oct 2025 07:00:00 GMT

Discover some of the interesting features that have landed in stable and beta web browsers during October 2025.

Published: October 30, 2025

Stable browser releases

Chrome 142 and Firefox 144 released to stable during October, this post takes a look at what that means for the web platform.

The View Transitions API for Single-Page Apps

Firefox 144 includes support for same-document view transitions. This includes support for:

The :active-view-transition pseudo-class
The view-transition-class property
The view-transition-name property
The ::view-transition pseudo-element
The ::view-transition-group() pseudo-element
The ::view-transition-image-pair() pseudo-element
The ::view-transition-new() pseudo-element
The ::view-transition-old() pseudo-element

This makes same-document view transitions Baseline Newly available.

Browser Support

Source

The `command` and `commandfor` attributes on the `<button>` element

Firefox 144 supports command and commandfor. You can find out more about these attributes in Introducing command and commandfor.

Browser Support

The `moveBefore()` method

The moveBefore() method is now supported by Firefox on the Element, DocumentFragment and Document interfaces. This lets you move an immediate child element of the object, before another of its child elements, with both elements retaining their state.

Learn more in Preserve state during DOM mutations with moveBefore().

`:target-before` and `:target-after` pseudo-classes

Chrome 142 adds pseudo-classes that match scroll markers that are before or after the active marker (matching :target-current) within the same scroll marker group, as determined by flat tree order:

:target-before: Matches all scroll markers that precede the active marker in the flat tree order within the group.
:target-after: Matches all scroll markers that follow the active marker in the flat tree order within the group.

Browser Support

Source

Range syntax for style container queries and `if()`

Chrome 142 enhances CSS style queries and the if() function by adding support for range syntax.

It extends style queries beyond exact value matching (for example, style(--theme: dark)). Developers can use comparison operators (such as > and <) to compare custom properties, literal values (for example, 10px or 25%), and values from substitution functions like attr() and env(). For a valid comparison, both sides must resolve to the same data type. It is limited to the following numeric types: <length>, <number>, <percentage>, <angle>, <time>, <frequency>, and <resolution>.

Interest Invokers (the `interestfor` attribute)

Chrome 142 also adds an interestfor attribute to <button> and <a> elements. This attribute adds "interest" behaviors to the element. When a user shows interest in the element, actions are triggered on the target element, for example, showing a popover.

The user agent detects when a user shows interest in the element through methods such as holding the pointer over the element, hitting special hotkeys on the keyboard, or long-pressing the element on touchscreens. When interest is shown or lost, an InterestEvent fires on the target, which has default actions for popovers, such as showing and hiding the popover.

Browser Support

Beta browser releases

Firefox 145 includes the source property of the ToggleEvent interface and the Atomics.waitAsync() static method.

Chrome 145 includes CSS anchored fallback container queries. This introduces @container anchored(fallback) to style descendants of anchor-positioned elements based on which position-try-fallbacks value is applied.

The winners of the Baseline Tooling Hackathon are...

Mon, 27 Oct 2025 07:00:00 GMT

Published: October 27, 2025

Last month, we kicked off the Baseline Tooling Hackathon, calling on you to build the most innovative and useful new tools to help developers adopt more modern web features. When the clock stopped, nearly 3,000 developers answered the call and submitted hundreds of projects. There were so many clever, innovative, and entertaining submissions, but only three can win their share of the $10,000 prize pool. After careful consideration, we the judges have finally picked our winners.

🥇 The first place winner is eslint-plugin-baseline-js, submitted by Ryuya Hasegawa!

This is an ESLint plugin that checks the Baseline status of JavaScript features, and flags anything newer than your configured Baseline target. It works in both JavaScript and TypeScript environments, covering hundreds of features.

What really stood out to us about this submission was its usefulness; the likelihood for an average developer to actually start using and benefitting from this tool. It fits neatly into the ESLint ecosystem by complementing existing tools like the officially-supported ESLint for CSS and the HTML ESLint community plugin. With its familiar configuration options for Baseline targets like Newly available, Widely available, and Baseline years, you can expect a consistent experience across all of your code. To get you up and running quickly, it also comes with high-quality documentation, including installation instructions, best practices, and examples.

Under the hood, the plugin syncs with the web-features dataset as its source of truth for web feature compatibility. To detect these features in source code, the plugin integrates with ESLint core and eslint-plugin-es-x, rather relying on brittle regular expressions. It also supports the typescript-eslint parser, which can detect features much more reliably.

Overall, this is a highly innovative and useful tool deserving of the top prize, and we encourage you to give it a try. If you'd like to dig into the source code or raise an issue, you can find it on GitHub at 3ru/eslint-plugin-baseline-js.

🥈 The second place winner is baseline-mcp, submitted by Technickel Dev!

This is an MCP server that provides AI-enabled development workflows with accurate information about web feature compatibility and their Baseline status.

There's no denying how prevalent AI has become in web development, which is why tools like this are becoming increasingly important to steer agents towards generating more modern code. This project addresses that need well by providing agents with several useful MCP tools to answer a variety of questions about web features, grounded in the trusted web-features data. In addition to performing rote tasks like looking up the Baseline status for a given feature ID, it can also perform logical tasks like figuring out the correct feature ID based on context and suggesting modern alternatives for outdated web features.

Try it out in the web client demo and see the GitHub repo for installation instructions, ways to interact with the server, and the source code.

🥉 The third place winner is Baseline Status for Video, submitted by Zoran Jambor!

This is a web application for generating Baseline widgets embedded in videos.

The role of Baseline is to provide unambiguous browser compatibility information about web features, which you can reference in MDN articles, caniuse docs, and IDEs like VS Code and WebStorm. But developers get their information about web features from other places too—like YouTube. This project makes it easier for video creators and web influencers to generate Baseline information for a feature in a customizable and video-friendly way. Given the huge reach of some of the most popular web influencers, we're excited about the potential for this tool to help spread Baseline awareness to many more developers.

This tool is powered by the <baseline-status> web component, which uses the Web Platform Dashboard API to get the Baseline status and browser implementation details for any feature ID you enter. The app records the widget animating in and out over a solid background, which can be keyed out in editing software.

Visit the Baseline Status for Video app to try it for yourself, or browse the source code on GitHub.

Huge congratulations to all of the winners! We'd also like to thank everyone else who submitted a project and completed the feedback survey. All of the time and effort you poured into your creative and inspiring projects is greatly appreciated. The 10 winners of the "Most Valuable Feedback" prize have all been notified, and overall there were so many valuable and actionable suggestions that we're going to take back to the appropriate teams to make Baseline even better.

URLPattern is now Baseline Newly available

Mon, 20 Oct 2025 07:00:00 GMT

Published: Oct 20, 2025

If you've ever built a feature that needs to react to URL changes, you've likely found yourself writing complex regular expressions or pulling in a third-party library for routing. The URL Pattern API, now Baseline Newly available, provides a standardized, powerful, and interoperable solution for this common challenge.

It lets you match URLs against a familiar pattern syntax, making it much less difficult to parse URLs and extract data with methods like .exec() and .test().

const pattern = new URLPattern({ pathname: "/products/:id" });
console.log(pattern.test("https://example.com/products/123")); // true

The functionality of the URL Pattern API is available in the URLPattern interface. In this post, you'll see how using it can help improve your codebase when you come across some common challenges.

Basic URL pattern matching

Before the availability of the URL pattern API, basic URL pattern matching often meant combining the older URL interface to parse a URL, then apply a separate—often complex—regular expression to the .pathname property to test for a match.

const url = new URL(location.href);
const pathRegex = /^\/users\/([a-zA-Z0-9]+)\/?$/;
const isMatch = pathRegex.test(url.pathname);

With URLPattern, this task now requires less code, and is easier to read:

const pattern = new URLPattern({ pathname: "/users/:id" });
const isMatch = pattern.test(location.href);

Extract dynamic parameters

Another common use case for URLPattern is when you need to extract dynamic parameters from a URL. In the past, numbered regular expression capture groups were often relied on, which are positional and anonymous. You had to access parameters by their array index (result[1], result[2]), which is fragile when the order of the capture groups changes.

const pathRegex = /^\/books\/([a-z]+)\/(\d+)\/?$/;
const result = pathRegex.exec("/books/classics/12345");

// `result` is an array:
// ["/books/classics/12345", "classics", "12345"]
const category = result ? result[1] : null;
const bookId = result ? result[2] : null;

URLPattern returns a structured groups object, featuring named parameters. The names directly correspond to the keys in the resulting object, leading to explicit and robust code.

// Pattern to match /books/<category>/<id>
const pattern = new URLPattern({ pathname: "/books/:category/:id" });
const result = pattern.exec("/books/classics/12345");

// `result.pathname.groups` will return:
// { category: "classics", id: "12345" }
const { category, id: bookId } = result.pathname.groups;

Compose multipart matches

The typical way to compose multipart matches for a URL in the past would be to use the URL constructor to get individual parts (hostname, pathname), then run separate checks or regular expressions on each.

const url = new URL(req.url);

if (url.hostname.endsWith(".cdn.com") && url.pathname.startsWith("/images/")) {
  // Do something
}

URLPattern supports this natively, with predictable controls:

const pattern = new URLPattern({ hostname: "*.cdn.com", pathname: "/images/*" });

if (pattern.test(req.url)) {
  // Do something
}

Project dependencies

Prior to URLPattern, processing URL strings was often delegated to a third-party library to the application bundle to handle routing logic robustly.

Now that URLPattern is Baseline Newly available, you'll have zero dependencies for doing this type of work. The functionality is built into the browser, reducing bundle size, eliminating a dependency to manage, and using a potentially more performant in-browser implementation that works across all major browser engines.

Detailed usage

The usefulness of URLPattern is in its ability to serve both basic and advanced use cases. You can start with simpler path matching and layer in more powerful features as you need them. Here are some common scenarios.

Match a path and extract parameters

A common use case of URL pattern matching is client-side routing. URLPattern makes it very clean. You can check if a URL matches a pattern with .test(), and extract the dynamic parts with .exec().

const pattern = new URLPattern({ pathname: "/products/:category/:id" });

// Use .test() for a boolean check
console.log(pattern.test("https://example.com/products/electronics/123")); // → true
console.log(pattern.test("https://example.com/blog")); // → false

// Use .exec() to extract the named groups
const result = pattern.exec("https://example.com/products/electronics/123");

if (result) {
  const { category, id } = result.pathname.groups;
  console.log(`Loading product ${id} from the ${category} category.`); // → "Loading product 123 from the electronics category."
}

How to match subdomains and more

Unlike many routing libraries, URLPattern is a full URL matcher. This is perfect for apps that behave differently based on the hostname, like routing API calls to a specific subdomain.

Here, a pattern is created that only matches requests to an api subdomain and a specific path.

const apiPattern = new URLPattern({
  hostname: ":subdomain.myapp.com",
  pathname: "/api/v:version/*"
});

const result = apiPattern.exec("https://api.myapp.com/api/v2/users");

if (result) {
  const { subdomain } = result.hostname.groups;
  const { version } = result.pathname.groups;
  console.log(`Request to the '${subdomain}' subdomain, API version ${version}.`); // → "Request to the 'api' subdomain, API version 2."
}

Wildcards and regular expressions

When you need more flexibility than named groups alone can provide, URLPattern supports wildcards (*) and embedding regular expressions directly into your patterns for better control.

For example, here's a pattern to match any image file within a user's asset folder, while also ensuring the user ID is a number.

// :userId(\\d+) - Matches a named group 'userId', but only if it contains one or more digits.
// * - A wildcard that matches any character until the next separator (like a '.')
const assetPattern = new URLPattern({
  pathname: "/users/:userId(\\d+)/assets/*.(jpg|png|gif)"
});

const result1 = assetPattern.exec("https://example.com/users/123/assets/profile.jpg");
console.log(result1?.pathname.groups.userId); // → "123" (It matches)

const result2 = assetPattern.exec("https://example.com/users/abc/assets/avatar.png");
console.log(result2); // → null (It fails because 'abc' is not a digit)

A practical example: routing in a service worker

Service workers are a perfect use case for URLPattern. You can cleanly intercept fetch requests and apply different caching strategies without messy regular expressions or conditional statements relaying on url.includes().

// Inside your service worker file:

const IMAGE_ASSETS = new URLPattern({ pathname: "/images/*" });
const API_CALLS = new URLPattern({ pathname: "/api/*" });

self.addEventListener("fetch", (event) => {
  const url = event.request.url;

  if (IMAGE_ASSETS.test(url)) {
    // Apply a cache-first strategy for images
    event.respondWith(cacheFirst(event.request));
  } else if (API_CALLS.test(url)) {
    // Apply a network-first strategy for API calls
    event.respondWith(networkFirst(event.request));
  }
});

For years, URL routing in the browser has meant complex regular expressions or third-party libraries. URLPattern changes that by offering a robust, adaptable, and standardized solution built directly into the browser.

So, the next time you find yourself writing a regular expression to parse a URL, stop and consider URLPattern. Try refactoring a complex routing module in your code, or use it in your next service worker to handle fetch requests. You might find you can simplify your code and maybe even remove a dependency in the process!

The URL Pattern API is packed with more features than can be covered here. To dive deeper and see a full reference of all its capabilities, check out the comprehensive documentation on MDN Web Docs.

Blog

New to the web platform in July

Stable browser releases

HTML parser updates in Firefox 153 bring customizable <select> closer

The ruby-overhang CSS property

Declarative Shadow DOM manual slot assignment

The animation property on AnimationEvent and TransitionEvent

Desktop Picture-in-Picture API in Firefox

The Intl.Locale Info API

IDBObjectStore.getAllRecords() and IDBIndex.getAllRecords()

textStream() for Response, Request, and Blob

The <usermedia> capability element MVP

Bug fixes and quality-of-life updates in Safari 26.6

Beta browser releases

The Baseline Features audit is now available in Lighthouse

June 2026 Baseline monthly digest

Baseline Alerts on Web Platform Status

Baseline Newly available features

field-sizing

Baseline Widely available features

:has() pseudo-class

HTMLIFrameElement.loading

CanvasRenderingContext2D.reset()

cap length unit

counter-set property

createImageBitmap()

<easing-function> data type

& nesting selector

Responsive preloading with rel="preload"

HTMLMediaElement.preservesPitch

:dir() pseudo-class

pow() math function

CSS mask property

@media (scripting)

URL.canParse()

Storage Access API

That's a wrap

New to the web platform in June

Stable browser releases

Sizing form controls with field-sizing becomes Baseline

Basic shapes rect() and xywh() in shape-outside become Baseline

Automatic font scaling with CSS text-fit

CSS gap decorations

CSS background-clip: border-area

Programmatic scroll promises

Declarative keyboard navigation with focusgroup

WebSockets supported in Back/Forward Cache (bfcache)

Interim and header response timing in Resource Timing

Action buttons for Notifications

Beta browser releases

Introducing Baseline Alerts

How do Baseline Alerts work?

How are Baseline Alerts useful?

Create a personalized newsletter

Create shareable lists

Slack webhooks

Give it a try!

Effortlessly get Baseline target data with the updated Baseline Checker tool

May 2026 Baseline monthly digest

State of CSS 2026 survey

Baseline newly available features

Container style queries

:open pseudo-class

ToggleEvent.source

image-rendering property

text-decoration-skip-ink: all

SharedWorker

Baseline widely available features

lh length unit

rlh length unit

Navigator.userActivation

clip-path

:user-invalid pseudo-class

That's a wrap

New to the web platform in May

Stable browser releases

The :open CSS pseudo-class becomes Baseline

CSS name-only container queries become Baseline

Container style queries for custom properties become Baseline

Lazy loading for video and audio elements

HTML parser updates in Firefox 153 bring customizable `<select>` closer

The `ruby-overhang` CSS property

The `animation` property on `AnimationEvent` and `TransitionEvent`

The `Intl.Locale` Info API

`IDBObjectStore.getAllRecords()` and `IDBIndex.getAllRecords()`

`textStream()` for `Response`, `Request`, and `Blob`

The `<usermedia>` capability element MVP

`field-sizing`

`:has()` pseudo-class

`HTMLIFrameElement.loading`

`CanvasRenderingContext2D.reset()`

`cap` length unit

`counter-set` property

`createImageBitmap()`

`<easing-function>` data type

`&` nesting selector

Responsive preloading with `rel="preload"`

`HTMLMediaElement.preservesPitch`

`:dir()` pseudo-class

`pow()` math function

CSS `mask` property

`@media (scripting)`

`URL.canParse()`

Sizing form controls with `field-sizing` becomes Baseline

Basic shapes `rect()` and `xywh()` in `shape-outside` become Baseline

Automatic font scaling with CSS `text-fit`

CSS `background-clip: border-area`

Declarative keyboard navigation with `focusgroup`

`:open` pseudo-class

`ToggleEvent.source`

`image-rendering` property

`text-decoration-skip-ink: all`

`SharedWorker`

`lh` length unit

`rlh` length unit

`Navigator.userActivation`

`clip-path`

`:user-invalid` pseudo-class

The `:open` CSS pseudo-class becomes Baseline

CSS `contrast-color()` function

`Math.sumPrecise()`

`<search>` element

`String.prototype.isWellFormed()` and `String.prototype.toWellFormed()`

The `contrast-color()` CSS function becomes Baseline

The `ariaNotify()` method

CSS `border-shape` property

SVG `<textPath>` path attribute

`Math.sumPrecise`

`Iterator.concat()`

`WebTransport`

`text-indent: each-line` declaration

`text-indent: hanging` declaration

`contain-intrinsic-size` CSS property

`@counter-style` at-rule

`hyphenate-character` CSS property

`hyphens` CSS property

`image-set()` CSS function

`<link rel="modulepreload">`

`navigator.storage`

`update` media query

CSS `shape()` function

Map `getOrInsert()` and `getOrInsertComputed()`

The `dirname` HTML attribute

The `trigger-scope` property

Popover `hint` value

Math functions in `sizes` attribute