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 +95% +95% +52% +90% +++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 +98% +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. +
+
+ -
+
+
+
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 +115 +115 ++ + + + +Passing WPT subtests +98% +98% +14% +14% +++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% +100% +99% +99% +++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 +87% +99% +18% +18% +++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 +93% +98% +82% +80% +++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% +67% +++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 ++ + + +Passing WPT subtests +75% +97% +91% +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 +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 +91% +91% +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 +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 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 +94% +94% +97% +81% +++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% +96% +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% +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
+ +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% +67% +++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% +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. +
+
+ -
+
+
+
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 ++ 15.4 ++ + +Passing WPT subtests +83% +100% +81% +73% +++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 +93% +93% +17% +92% +++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 +98% +99% +98% +93% +++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