Microsoft Edge - 2024 web platform top developer needs
As part of our commitment to the web platform, we continuously listen to developer signals and feedback. We leverage what we learn to implement the features that developers need to build great web experiences. We also know that developers need those features, especially those that can't be polyfilled, or which create new architectural opportunities, to be available across all browsers.
This dashboard represents our view of progress across the web ecosystem towards resolving top developer pain points and closing interoperability gaps.
For each feature listed below, the relevant browser compatibility status, as well as the latest test results from the Web Platform Tests (WPT) project, are given.
Note that the list isn't ranked in any particular order. If you'd like to influence these priorities, we encourage you to send us feedback. We're committed to continuing to listen and to drive progress on these priorities.
We hope that this dashboard plays a positive role in improving the platform for everyone.
Sum of passed subtests for all the features below. Test results from wpt.fyi.
-
View transitions allow you to create animated visual transitions between different states of a document, or between different documents.
Edge Chrome Firefox Safari Compatibility 111 111 Passing WPT subtests 93% 96% 42% 68% More information
- Over the past decade, single-page web applications have become very popular, and JavaScript frameworks have been used to provide the ability to smoothly transition between UI states without full page reloads. The View Transitions API allows multi-page apps to achieve the same level of smoothness and interactivity without JavaScript.
- The feature received more than 100 positive reactions on a proposal GitHub issue (source).
- The feature's announcement on X was positively received (source).
- In preliminary results to the State of HTML 2023 survey, the View Transitions API was the third most common response that appeared in the Browser Interoperability section.
Number of passed subtests for View transitions. Test results from wpt.fyi. View the latest results for this feature.
-
The
object-view-boxCSS property defines the subset within an image that should be drawn in the content box of a replaced element. The property lets you create images with custom styles.Edge Chrome Firefox Safari Compatibility 104 104 Passing WPT subtests 99% 84% 11% 18% More information
- The feature is a pre-requisite for the View Transitions API, which is a highly requested feature (source).
Number of passed subtests for object-view-box. Test results from wpt.fyi. View the latest results for this feature.
-
The
blocking="render"attribute for<link>,<script>, and<style>elements blocks rendering until the external script or stylesheet has been loaded. For<link rel="expect">, rendering is blocked until a specific element is in the DOM.Edge Chrome Firefox Safari Compatibility 105 105 Passing WPT subtests 100% 100% 72% 53% More information
- The feature is a pre-requisite for the View Transitions API, which is a highly requested feature (source).
Number of passed subtests for blocking="render". Test results from wpt.fyi. View the latest results for this feature.
-
CSS scroll-driven animations are a type of CSS animations that don't run over time, but are instead driven by the user's scroll position.
Edge Chrome Firefox Safari Compatibility 116 116 Passing WPT subtests 98% 98% 13% 13% More information
- This feature allows to create visually rich and interactive web experiences without requiring downloading, parsing, and running large JavaScript libraries.
- The feature received more than 100 positive reactions on a proposal GitHub issue (source).
Number of passed subtests for Scroll-driven animations. Test results from wpt.fyi. View the latest results for this feature.
-
The
popoverHTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using theshowPopover()method.Edge Chrome Firefox Safari Compatibility 114 114 125 17 Passing WPT subtests 99% 99% 99% 98% More information
- In preliminary results to the State of HTML 2023 survey, the popover feature was the most common response that appeared in the Browser Interoperability section.
- The feature received 80 positive reactions on a proposal GitHub issue (source).
Number of passed subtests for Popover. Test results from wpt.fyi. View the latest results for this feature.
-
A set of CSS features which makes top layer elements, like
<dialog>elements, or elements with thepopoverattribute, animatable as they enter and exit the top layer. The features include theoverlayCSS property, the@starting-styleat-rule, thetransition-behaviorCSS property, and support for animating thedisplayandcontent-visibilityCSS properties.Edge Chrome Firefox Safari Compatibility 117 117 Passing WPT subtests 91% 91% 63% 63% More information
- Top layer animations allow animating popovers, which is a highly requested feature.
Number of passed subtests for Top layer animations. Test results from wpt.fyi. View the latest results for this feature.
-
Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.
Edge Chrome Firefox Safari Compatibility 125 125 Passing WPT subtests 96% 99% 21% 21% More information
- Many JavaScript-based workarounds exist to position elements related to other elements. The anchor positioning polyfill also gets downloaded ~700 times a week, and its GitHub repository has more than 150 stars (source).
-
Anchor positioning is also a pre-requisite for the new OpenUI customizable
<select>element, which appears as the 5th most common feature in preliminary results to the State of HTML 2023 survey, in the Browser Interoperability section.
Number of passed subtests for Anchor positioning. Test results from wpt.fyi. View the latest results for this feature.
-
CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.
Edge Chrome Firefox Safari Compatibility 120 120 117 17.2 Passing WPT subtests 99% 99% 92% 87% More information
- In the State of CSS 2023 survey, CSS Nesting was a very common answer to the question: "Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?" (source).
Number of passed subtests for Nesting. Test results from wpt.fyi. View the latest results for this feature.
-
The
scrollbar-colorCSS property sets the color of the scrollbar track and thumb. Thescrollbar-gutterCSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears. Thescrollbar-widthCSS property sets the width of the scrollbar.Edge Chrome Firefox Safari Compatibility 121 121 97 Passing WPT subtests 99% 99% 100% 58% More information
- Styling scrollbar ranked #5 in the State of CSS Survey 2023's browser incompatibilities question (source).
Number of passed subtests for Scrollbar styling. Test results from wpt.fyi. View the latest results for this feature.
-
The
backdrop-filterCSS property applies graphical effects such as blurring or color shifting to the area behind an element.Edge Chrome Firefox Safari Compatibility 79 76 103 9 Passing WPT subtests 80% 98% 97% 36% More information
-
In State of CSS 2021,
backdrop-filterwas the 6th most common answer to the question "Are there any CSS features you have difficulties using because of differences between browsers?" (source). -
In State of CSS 2022,
backdrop-filterwas a common responses the question about browser incompatibilities, mentioned in ~3% of responses. (source). - In the MDN short survey on CSS & HTML, "CSS backdrop-filter property" was selected by ~21% of survey takers, putting it in the top third of the 20 options. (source).
Number of passed subtests for backdrop-filter. Test results from wpt.fyi. View the latest results for this feature.
-
In State of CSS 2021,
-
The
shadowrootmodeattribute on<template>creates a shadow root without the use of JavaScript. It is a declarative alternative to theattachShadow()method.Edge Chrome Firefox Safari Compatibility 111 111 123 16.4 Passing WPT subtests 99% 100% 99% 99% More information
- In preliminary results to the State of HTML 2023 survey, Declarative Shadow DOM was a common response that appeared in the Browser Interoperability section. Also, it was among the features that respondents expressed the most interest for.
Number of passed subtests for Declarative shadow DOM. Test results from wpt.fyi. View the latest results for this feature.
-
Customized built-in elements inherit from standard HTML elements such as
HTMLImageElementorHTMLParagraphElement. Their implementation customizes the behavior of the standard element.Edge Chrome Firefox Safari Compatibility 79 67 63 Passing WPT subtests 99% 99% 100% 33% More information
-
This GitHub issue about improving the
isHTML attribute received a lot of attention and reactions (source). - The Custom Elements polyfill is very popular (source).
Number of passed subtests for Customized built-in elements. Test results from wpt.fyi. View the latest results for this feature.
-
This GitHub issue about improving the
-
Trusted types allow you to lock down insecure parts of the DOM API and prevent client-side cross-site scripting (XSS) attacks.
Edge Chrome Firefox Safari Compatibility 83 83 Passing WPT subtests 99% 99% 47% 48% More information
- Meta uses Trusted Types by default for new products, and rolls out Trusted Types enforcement in existing products. Microsoft uses Trusted Types for Edge integrated applications and Edge WebUI pages. Integration of Trusted Types is completed or ongoing for several libraries and frameworks (source).
Number of passed subtests for Trusted types. Test results from wpt.fyi. View the latest results for this feature.
-
The Streams API allows developers to programmatically access streams of data received over the network and process them as desired. Asynchronous iteration of a stream makes it possible to use a
for await...ofloop to iterate through the stream's incoming data.Edge Chrome Firefox Safari Compatibility 124 124 110 Passing WPT subtests 96% 96% 89% 0% More information
- The Chromium implementation bug has more than 50 votes (source).
Number of passed subtests for Asynchronously iterable streams. Test results from wpt.fyi. View the latest results for this feature.
-
Text fragments link to a snippet of text within a page. The browser may scroll, highlight, or otherwise bring that text to the reader's attention. The text is specified in a URL fragment on the form
#:~:text=snippetand can be styled using the::target-textpseudo-element.Edge Chrome Firefox Safari Compatibility 89 89 Passing WPT subtests 99% 99% 27% 72% More information
Number of passed subtests for Text fragments. Test results from wpt.fyi. View the latest results for this feature.
-
The URL Pattern API defines a syntax that is used to create URL pattern matchers. These patterns can be matched against URLs or individual URL components.
Edge Chrome Firefox Safari Compatibility 122 122 Passing WPT subtests 100% 100% 0% 0% More information
- The URLPattern specification GitHub repository has ~150 stars (source).
- Feedback received while testing the API with developers has been positive (source).
Number of passed subtests for URLPattern. Test results from wpt.fyi. View the latest results for this feature.
-
The CSS Paint API enables developers to programmatically define images which can then be used anywhere a CSS image can normally be used. This feature improves the extensibility of CSS by providing an escape hatch for developers when the existing features don't match a particular use case.
Edge Chrome Firefox Safari Compatibility 79 65 Passing WPT subtests 97% 96% 14% 14% More information
- The polyfill for this feature has more than 700 stars on GitHub (source).
Number of passed subtests for CSS Paint API. Test results from wpt.fyi. View the latest results for this feature.
-
The
WebTransportAPI transmits data between a client and a server, by using the HTTP/3 protocol.Edge Chrome Firefox Safari Compatibility 97 97 114 Passing WPT subtests 70% 70% 78% 0% More information
- The specification GitHub repository has 800 stars (source).
Number of passed subtests for WebTransport. Test results from wpt.fyi. View the latest results for this feature.
-
The
documentcaretPositionFromPoint(x, y)method returns a DOM node and the text insertion point character offset within that node, given a point in the viewport.Edge Chrome Firefox Safari Compatibility 20 Passing WPT subtests 16% 16% 100% 16% More information
- The Chromium implementation bug almost has 50 votes (source).
Number of passed subtests for document.caretPositionFromPoint(). Test results from wpt.fyi. View the latest results for this feature.
-
JSON modules scripts are a way to import JSON in JavaScript by using the
importstatement. CSS module scripts are used to load CSS stylesheets by using theimportstatement. The imported stylesheets can then be applied to documents or shadow roots in the same manner as constructable stylesheets.Edge Chrome Firefox Safari Compatibility 123 123 Passing WPT subtests 98% 98% 7% 66% More information
- The GitHub issue which initially introduced the JSON module scripts idea received a lot of positive reactions (source).
- The GitHub issue which initially introduced the CSS module scripts idea received more than 200 positive reactions (source).
Number of passed subtests for JSON and CSS modules. Test results from wpt.fyi. View the latest results for this feature.
-
The
font-size-adjustCSS property provides a way to preserve apparent size of text across fonts in the fallback chain by adjusting the used font size so that the specified metric is scaled to the same size regardless of the font used.Edge Chrome Firefox Safari Compatibility 118 17 Passing WPT subtests 90% 88% 94% 94% More information
- The "The little known font-size-adjust CSS3 property" blog post received a lot of comments (source).
- The chromium implementation bug has 29 votes (source).
Number of passed subtests for font-size-adjust. Test results from wpt.fyi. View the latest results for this feature.
-
The CSS Custom Highlight API styles arbitrary text ranges, without adding extra elements to the DOM.
Edge Chrome Firefox Safari Compatibility 105 105 17.2 Passing WPT subtests 96% 97% 76% 81% More information
- Compelling use cases and positive reactions were received on the feature proposal on GitHub (source).
- Supportive comments were also received on the announcement CSS Tricks blog post (source).
Number of passed subtests for CSS Custom Highlight API. Test results from wpt.fyi. View the latest results for this feature.
-
The
HTMLVideoElement.requestVideoFrameCallback()method registers a callback that runs in the rendering steps when a new video frame is sent to the compositor. This is intended to allow developers to perform efficient per-video-frame operations on video, such as video processing and painting to a canvas, video analysis, or synchronization with external audio sources.Edge Chrome Firefox Safari Compatibility 83 83 15.4 Passing WPT subtests 79% 79% 34% 76% More information
- The specification GitHub repository has more than 50 stars (source).
- Developer interest was expressed on the WICG Discourse forum (source).
- The Mozilla standards position entry for this feature received some developer interest (source).
Number of passed subtests for requestVideoFrameCallback(). Test results from wpt.fyi. View the latest results for this feature.
-
The
@scopeCSS at-rule sets the scope for a group of rules.Edge Chrome Firefox Safari Compatibility 118 118 17.4 Passing WPT subtests 90% 90% 19% 87% More information
- CSS scoping appears in the top 10 missing features in the State of CSS 2023 survey (source).
Number of passed subtests for @scope. Test results from wpt.fyi. View the latest results for this feature.
-
The
:dir()CSS pseudo-class matches elements based on directionality, which is determined based on the HTMLdirattribute, and allows directionality-based styling. Thedir=autoHTML attribute determines directionality from the first character in the text with strong directionality.Edge Chrome Firefox Safari Compatibility 120 120 49 16.4 Passing WPT subtests 99% 100% 91% 87% More information
-
The Chromium implementation bug for the
:dir()pseudo-class has 35 votes (source). -
An interoperable implementation of the
:dir()pseudo-class is needed to provide developers with a consistent way to style based on text directionality (source).
Number of passed subtests for Text directionality. Test results from wpt.fyi. View the latest results for this feature.
-
The Chromium implementation bug for the