Welcome back to
New in Edge for developers, our recurring roundup of recent web platform updates in Microsoft Edge.
In this edition, we'll look more closely at some of the newest additions to Microsoft Edge and the Chromium project, such as the OpaqueRange API, to highlight and interact with ranges of text in input fields, the
referenceTarget property, to make your custom web components more accessible, and the
aria-actions attribute, to expose your widgets' secondary actions to assistive technologies.
We'll then round up other useful additions, including media-state pseudo-classes, relative alpha colors, and PWA drag regions, and go over early features that are ready for testing such as WebMCP, to unlock browsing agent scenarios.
OpaqueRange API: highlight and interact with text ranges in form inputs
The new OpaqueRange API provides live access to ranges of text within form inputs, such as
<textarea> and
<input> elements.
You can use these ranges for operations like
getBoundingClientRect() and
getClientRects(), and therefore position UI at specific places within form inputs.
The OpaqueRange API also works with the
CSS Custom Highlight API, making it possible to create personalized highlights within editable text regions.
To learn more about the OpaqueRange API, checkout our
intro video,
explainer, and
live demos.
Reference Target: improve your web components' accessibility
A common pain point developers face when creating web components with Shadow DOM is making them accessible. A problem also known as cross-root ARIA.
The
referenceTarget property of a ShadowRoot object, which can also be set via the
shadowrootreferencetarget HTML attribute on elements, solves this.
It makes it possible to forward ID reference attributes, such as
for or
aria-labelledby, to elements that are inside the shadow DOM of a component.
For example, you can use this to link a
<label for> element to the right
<input> element, even if that
<input> is inside the shadow DOM of a web component.
<label for="custom-checkbox">Checkbox value</label>
<custom-checkbox id="custom-checkbox">
<template shadowrootmode="open" shadowrootreferencetarget="real-checkbox">
<input id="real-checkbox" type="checkbox">
</template>
</custom-checkbox>
To learn more, read our
explainer, and use our
live demos.
aria-actions: make composite widgets accessible
Complex UIs often contain composite widgets with multiple actionable parts. For example, a tab widget may also include another button.
These composite interactive widgets can be hard to make accessible to assistive technology users.
The new HTML
aria-actions attribute makes it possible to expose your widgets' secondary actions to screen readers.
For example, you can expose the close button of a tab widget as follows:
<button class="tab" aria-actions="close-tab">
<span class=”tab-title”>Tab 1</span>
<span id="close-tab">Close</span>
</button>
To learn more, check out the
tabs with action buttons example from the ARIA Authoring Practices Guide.
And many other features
The above features, which our team added to Microsoft Edge and contributed to Chromium, are only a part of what's been added over the past few releases. Below are other additions that might simplify your daily life as a web developer. For even more, check out the
Edge web platform release notes.
- Media pseudo-classes allow you to style media elements, such as
<video> and <audio>, based on their playback state, by using the new :playing, :paused, :buffering, :muted, and :stalled pseudo-classes.
- The window-drag CSS property is a new standardized way to make installed PWA windows draggable, which is helpful when using the Window Controls Overlay API.
In addition, starting with Microsoft Edge 151 on Windows, when you use the Window Controls Overlay API, the PWA app title bar is now hidden by default, giving you more control over the look and feel of your app.
- New JavaScript Iterator methods make it easier to work with iterators:
- Iterator.join() returns a string that's the concatenation of all elements that are produced by the iterator.
- Iterator.zip(), and Iterator.zipKeyed() create new iterators that aggregate elements from multiple iterable objects. These methods zip the input iterables together, allowing simultaneous iteration over the input iterables.
- The soft-navigation and interaction-contentful-paint performance entries help you improve performance of modern single-page web apps by measuring soft navigations that update the page without triggering a traditional page browser history changes.
- The alpha() CSS function creates a new color by adjusting another color's transparency.
- textStream() is now available on Response, Request, and Body objects, making it more convenient to process text incrementally without manually decoding byte chunks.
- The <camera> and <microphone> HTML elements are browser-provided buttons that let users toggle camera or microphone streams and, when needed, connect the permission request directly to an explicit user action.
Ready for testing
We're already hard at work on what's coming next. Here are upcoming features that are available for your early testing and feedback. You can test these new features either by enabling them locally, or on your production website with your own users, by registering for an
origin trial.
Your feedback is crucial to help us shape these next features and ensure they meet your needs as developers, and the needs of your users.
WebMCP: unlock browsing agent scenarios on your site
We have been actively involved with the
Web Machine Learning Community Group, specifying
WebMCP: a web API that helps you create efficient, fast, and trusted human-agent collaboration workflows for your site.
Using WebMCP, you can reuse your existing front-end code, and expose it as structured tools which a browsing agent can then use to help users accomplish tasks on your site.
Our implementation of the WebMCP spec in Microsoft Edge is ready for testing. To get started, we created a few samples and a browser extension to run and debug your WebMCP tools. Find out more on the
webmcp-labs repo.
JS Self-Profiling markers: see what the browser is doing during a trace
The
JS Self-Profiling API is a great way to measure your app's performance in production, on real user devices. But it only samples your page's JavaScript, which often leaves unexplained gaps in a trace, moments where the browser was styling, laying out, painting, or running garbage collection.
We're adding sample markers to fill those gaps. Each sample can now carry a marker that identifies what the browser was doing at capture time. Now, an unexplained gap shows up clearly as, for example, a run of layout markers, so you can pinpoint the real cause of a slow trace and optimize the right thing instead of guessing.
To learn more, read the
feature explainer, see the markers in action by running our
live demo, and register for the
origin trial to test it with your own users and share feedback.
New network debugging tools: edit and resend requests
Starting with Edge 153, the Network tool in DevTools now includes two new actions, available on each request via the contextual menu:
- Resend: this action resends a request such as XHR or Fetch.
- Edit and resend as fetch: this action creates a Fetch API call but doesn't send it right away. Instead, it writes it to the input of the Console tool. You can then modify the new request, such as by changing the request headers or parameters, and send it.
Learn more about these new features on our Network tool reference documentation at
Resend a request and
Edit and resend a request as a fetch call.
These features are planned to replace the experimental Network Console tool. Try them out and
share your feedback.
navigator.install() and <install>: install other web apps
Updated versions of the Web Install API and the
<install> element are available for testing.
Both
navigator.install() and the
<install> element now take a direct link to the target manifest file of the app you're installing. For example:
// Install the current app
navigator.install();
// Install a cross-origin web app
navigator.install( { manifest: https://example.com/manifest.json });
<!-- Install the current app -->
<install>
<!-- Install a cross-origin web app -->
<install manifest="https://example.com/app/manifest.webmanifest"></install>
To learn more about these web app installation features, check out the
Web Install API and
<install> element demos and resources. You can also start using the
<install> element on your own site by registering to the
origin trial.
News from across the web platform
Before closing, here are a couple of updates from the broader web ecosystem.
The Interop 2027 call for proposals closes soon
The Interop 2027 call for proposals is open,
submit your ideas now!
If there's a web feature you care about and would like to see more consistently supported across browsers, now is the time to make your case. Submit your idea and help shape the priorities for Interop 2027.
Learn more by reading our blog post:
Calling for Interop 2027 proposals.
Microsoft Edge sponsors Open Web Docs for the 7th consecutive year
High-quality and up-to-date technical web platform documentation continues to play a key role in making the web the most universal application runtime in history.
This is why, at Microsoft Edge, we have been sponsoring
Open Web Docs. This year marks our
7th consecutive year funding OWD, enabling the collective to continue creating and maintaining the documentation and data that all web developers need.
A native menu element is coming
Web developers have long needed a browser-provided way to build menus that don't require re-implementing accessibility, keyboard navigation, focus management, and positioning from scratch. The
Open UI community is working on a new native menu element that aims to provide these capabilities out of the box, while remaining flexible enough to fit modern design systems.
We're excited about this work because it reflects a broader trend toward more powerful, customizable built-in web platform components. Great work from the Google team for implementing the
<menubar> element.
To test the element, enable the "Experimental Web Platform features" flag on the
about://flags page. We can't wait to see what you build.
Do you have feedback? We're listening
On the Microsoft Edge web platform team, we're always listening to what users and web developers need and work toward a better, more capable web. We hope these recent additions help you build experiences that are easier to use, easier to measure, and easier to maintain.
Try the features that matter to your projects,
tell us where the APIs fall short, and share the use cases the platform still doesn't solve. Your feedback helps us improve Edge, Chromium, and the web platform for everyone.
Log in
