Microsoft Edge 150 web platform release notes (Jul. 2, 2026)

Microsoft Edge DevTools

See What's new in DevTools (Microsoft Edge 150).

WebView2

See:

• Runtime 150.0.4078.44 (Jul. 7, 2026)
• Release SDK 1.0.4078.44, for Runtime 150 (Jul. 7, 2026)

CSS features

The following new Cascading Style Sheets (CSS) features are included in Microsoft Edge.

AccentColor and AccentColorText system colors

The AccentColor and AccentColorText system colors can now be used as CSS color values to access the system accent color that's specified on the user's device.

See also:

• at MDN.
• system Colors in CSS Color Module Level 4.

Allow optional rounding parameter for polygon()

Allows an optional round parameter in the polygon() CSS shape function. You can specify a length value to round polygon corners, without manually computing bezier curves.

For example, to create a rounded triangle: polygon(round 50px, 50% 0%, 0% 100%, 100% 100%)

See also:

• CSS polygon() round playground - Interactive demo.
• [css-shapes] Allow optional rounding parameter for polygon() #9843 - CSS Working Group issue.

Animatable zoom

The CSS zoom property can be animated, and interpolates as a . You can transition and animate zoom to smoothly scale elements and their layout, complementing existing transform-based scaling.

See also:

• zoom CSS property at MDN.

CSS URL request modifiers

The following CSS functions can be used with the CSS url() function to control the fetch behavior of the referenced resource:

• cross-origin()
• integrity()
• referrer-policy()

For example, background-image: url("image.png" cross-origin(anonymous)) fetches the image by using CORS anonymous mode.

This gives you fine-grained control over cross-origin access, subresource integrity, and referrer policy for CSS-loaded resources including:

• Images.
• Fonts.
• SVG references.
• Imported stylesheets.

See also:

• CSS type at MDN.
• Request URL Modifiers in CSS Values and Units Module Level 5.

CSS text-fit property

The CSS text-fit property scales the font size of a text node to perfectly fit the width of its containing box.

This property allows you to ensure that headlines or dynamic content fill the available horizontal space, without manual font-size calculations or complex JavaScript workarounds.

This property provides a robust, CSS-native solution for responsive typography that maintains visual alignment across different screen sizes and varying text lengths.

See also:

• Text fitting: the text-fit property in CSS Text Module Level 4.

CSS background-clip: border-area

The CSS background-clip: border-area property clips an element's background to the area painted by its border strokes, taking border-width and border-style into account, while ignoring transparency from border-color.

This enables gradient borders without border-image.

See also:

• background-clip CSS property at MDN.

CSS image() function

The CSS image() function enables you to easily generate a solid-color image from any color.

For example, to create a solid red background-image, use background: image(red);.

See also:

• CSS type at MDN.
• Image Fallbacks and Annotations: the image() notation in CSS Images Module Level 4.

CSS light-dark() with image values

The CSS light-dark() function now accepts image values (url(), image-set(), none).

This makes it possible to automatically switch between images based on the user's preferred color scheme.

You can use the light-dark() function with image values in the following properties:

• background-image
• list-style-image
• border-image-source
• cursor
• content

See also:

• light-dark() CSS function at MDN.

Comma-separated container queries

The @container rule now supports multiple container queries, separated by commas. The @container rule applies if at least one of the queries matches.

This makes it possible to have fallback queries for features that aren't supported in all browsers.

Example:

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

See also:

• CSS container querie at MDN.

Expose unprintable areas via CSS

Use the CSS page-margin-safety property to avoid trying to print to unprintable areas of a sheet of paper.

A printer usually has a small area at each of the four edges of a sheet of paper that the printer is not capable of marking reliably, usually due to the printer's paper handling mechanism.

The default page margins are expected to be bigger than these paper-edge areas, but if you set margins in your app, and want to add @page margin boxes (such as for custom headers and footers), the page-margin-safety property provides a way of detecting where it's safe to print.

See also:

• Staying within the printable area: the page-margin-safety property in CSS Paged Media Module Level 3.

named-feature() function for CSS @supports

The named-feature() function allows CSS @supports rules to query for a small set of specific named features that are not possible to test for by using other @supports mechanisms, but which are valuable to test for.

See also:

• Extensions to the @supports rule in CSS Conditional Rules Module Level 5.

overscroll-behavior: chain

The overscroll-behavior CSS property now supports the chain value.

This property affects two independent effects:

• Scroll propagation.
• Local border effect (such as overscroll stretch).

Previously, overscroll-behavior had three values:

• none: No propagation, no local effect.
• auto: Propagation, local effect.
• contain: No propagation, local effect.

This feature adds a new value to complete the set:

• chain: Propagation, no local effect.

See also:

• overscroll-behavior CSS property at MDN.
• Overscroll Behavior Properties in CSS Overscroll Behavior Module Level 1.

flex-wrap:balance

flex-wrap:balance allows you to distribute content between each flex-line, so that the layout appears more balanced.

This is similar to text-wrap:balance.

See also:

• flex-wrap CSS property at MDN.
• Flex Line Wrapping: the flex-wrap property in CSS Flexible Box Layout Module Level 2.

HTML features

The following new HTML features are included in Microsoft Edge.

focusgroup attribute

The HTML focusgroup attribute standardizes keyboard navigation for composite widgets such as toolbars, tabs, menus, and radio groups.

The focusgroup attribute automatically handles the following, without requiring custom JavaScript code:

• The roving tabindex behavior.
• Navigation via arrow keys.
• Focus memory; restores the last-focused element when re-entering the focusgroup.

Example:

  Bold
  Italic
  Underline

See also:

• Making keyboard navigation effortless.
• Request for developer feedback: focusgroup.

popover="hint" attribute behavior changes

The behavior of elements with the popover="hint" attribute has changed to improve interactions with popover="auto" elements: opening a popover="hint" element will no longer inadvertently close unrelated popover="auto" elements.

Previously, the interactions between these two types of popover elements could be complex in some situations, such as nesting popover="auto" elements inside popover="hint" elements.

popover="hint" elements are now only hidden when their ancester popover="auto" element is hidden, or when a new, unrelated popover="auto" is opened.

Additionally, you can now safely nest a popover="auto" element inside a popover="hint" element. The nested popover="auto" element will behave as a popover="hint" element. This allows use cases such as placing a customizable