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 inputsThe new OpaqueRange API provides live access to ranges of text within form inputs, such as and 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' accessibilityA 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 element to the right element, even if that is inside the shadow DOM of a web component.Checkbox value To learn more, read our explainer, and use our live demos.aria-actions: make composite widgets accessibleComplex 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: Tab 1 CloseTo learn more, check out the tabs with action buttons example from the ARIA Authoring Practices Guide.And many other featuresThe 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 and , 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 and 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 testingWe'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 siteWe 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 traceThe 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 requestsStarting 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 other web appsUpdated versions of the Web Install API and the element are available for testing.Both navigator.install() and the element now take a direct link to the target manifest file of the app you're installing. For example:// Install the current appnavigator.install();// Install a cross-origin web appnavigator.install( { manifest: https://example.com/manifest.json });To learn more about these web app installation features, check out the Web Install API and element demos and resources. You can also start using the element on your own site by registering to the origin trial.News from across the web platformBefore closing, here are a couple of updates from the broader web ecosystem.The Interop 2027 call for proposals closes soonThe 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 yearHigh-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 comingWeb 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 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 listeningOn 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.