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.
Edge Chrome Firefox Safari Compatibility 124 124 Passing WPT subtests 95% 96% 52% 93% 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 crops and zooms to an inset area of an image.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% 84% 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.
-
The
animation-timeline,scroll-timeline, andview-timelineCSS properties advance animations based on the user's scroll position.Edge Chrome Firefox Safari Compatibility 115 115 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 100% 100% 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 95% 95% 67% 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 99% 99% 14% 14% 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 94% 99% 97% 97% 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% 84% 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 18 Passing WPT subtests 76% 97% 91% 90% 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 100% 100% 100% 100% 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 are HTML elements that extend built-in elements using the
isattribute, to add new behaviors that you define.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 88% 88% 10% 10% 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.
-
Asynchronous iteration of a stream allows you to use
for await … ofloops to iterate through a stream's incoming data.Edge Chrome Firefox Safari Compatibility 124 124 110 Passing WPT subtests 94% 94% 87% 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 are URL fragments on the form
#:~:text=snippetand link to a snippet of text within a page. The browser may scroll, highlight, or otherwise bring that text to the reader's attention.Edge Chrome Firefox Safari Compatibility 83 81 16.1 Passing WPT subtests 73% 73% 97% 82% More information
Number of passed subtests for Scroll to text fragment. Test results from wpt.fyi. View the latest results for this feature.
-
The
URLPatternAPI creates patterns that can be matched against URLs or URL components.Edge Chrome Firefox Safari Compatibility 95 95 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
paint()CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.Edge Chrome Firefox Safari Compatibility 79 65 Passing WPT subtests 97% 95% 14% 14% More information
- The polyfill for this feature has more than 700 stars on GitHub (source).
Number of passed subtests for paint(). 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 69% 69% 77% 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
document.caretPositionFromPoint()method finds an insertion point, represented by a DOM node and an offset within that node, for given coordinates in the viewport.Edge Chrome Firefox Safari Compatibility 128 128 20 Passing WPT subtests 100% 100% 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.
-
Module
import … with { type: "json" }statements load JSON data. Also known as JSON module scripts and formerly known as import assertions.
Module `import … with { type: "css" } statements load CSS modules as constructable stylesheets. Also known as CSS module scripts and formerly known as import assertions.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 preserves apparent text size, regardless of the font used, by scaling fonts to the same size with respect to a specific metric, such as x-height. This can help make fallback fonts look the same size.Edge Chrome Firefox Safari Compatibility 127 127 118 17 Passing WPT subtests 100% 97% 94% 99% 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.
-
Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.
Edge Chrome Firefox Safari Compatibility 105 105 17.2 Passing WPT subtests 95% 96% 74% 82% 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 Custom highlights. Test results from wpt.fyi. View the latest results for this feature.
-
The
requestVideoFrameCallback()method for<video>schedules a function that runs with the next video frame. It is similar torequestAnimationFrame(), but for video.Edge Chrome Firefox Safari Compatibility 83 83 132 15.4 Passing WPT subtests 83% 79% 83% 83% 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 100% 100% 20% 84% 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 functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).Edge Chrome Firefox Safari Compatibility 120 120 49 16.4 Passing WPT subtests 99% 99% 100% 95% 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 :dir(). Test results from wpt.fyi. View the latest results for this feature.
-
The Chromium implementation bug for the