Windows
Windows
Welcome to New in Edge for developers, a new series featuring recent web platform updates in Microsoft Edge that help web developers build better sites and apps. In this first edition, we'll look at for styling the space between layout items, the for easier keyboard navigation, same-site for moving an installed web app without disrupting users, and such as text-fit, flex-wrap: balance, and faster clipboard reads. We'll also preview upcoming features you can test today and share feedback on early, and highlight a few updates from across the broader web ecosystem, such as , an AI coding agent skill helping you write better code.
.grid {
display: grid;
gap: 16px;
row-rule: 1px solid #ccc;
column-rule: 2px solid #333;
}
Learn more about and try our .
<!-- Install the current app -->
<install></install>
<!-- Install a different app -->
<install installurl="https://awesome-app.com/"></install>
To learn more, and get started, see our blog post: .
.grid {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
To learn more, check out .
Style layout gaps
CSS gap decorations let you style the gaps between items in flex, grid, and multi-column layouts directly, without relying on border hacks, pseudo-elements, or extra DOM elements. The newrow-rule and extended column-rule properties, as well as the rule shorthand, support colors, patterns, and even the repeat() syntax for rich, consistent designs with minimal CSS. .grid {
display: grid;
gap: 16px;
row-rule: 1px solid #ccc;
column-rule: 2px solid #333;
}
Learn more about and try our .
Improve keyboard accessibility with focusgroup
Thefocusgroup HTML attribute gives you arrow key navigation for composite widgets, such as toolbars, tabs, or menus, for free. With the focusgroup attribute you get automatic arrow key handling and focus memory, without any custom JavaScript roving tabindex code. To learn more, check out .Migrate your PWA to a new origin
You can now seamlessly migrate your Progressive Web App (PWA) to a new, same-site origin, preserving user installations and permissions. When a user installs a PWA, its identity is bound to its web origin (for example,example.com/app). Previously, changing the origin forced users to manually uninstall and reinstall the app. This is no longer necessary. Now, moving to a new origin such as app.example.com can happen without interruption to your users. To learn more, see .And many other features
We've added many more web platform features to Microsoft Edge over the past fews releases. Check out the links below to find out more:- : scale an image in a way that preserves contrast and edges, without smoothing colors or introducing blur.
- : measure, highlight, and anchor UI to the text inside
<input>and<textarea>without mirror-div hacks. - : the Async Clipboard API now defers reading clipboard data until you call the getType() method.
- : scale the font-size of a text node so it perfectly fits the width of the box.
- : easily switch images based on the user's preferred color scheme.
- : distribute the content of a flexbox layout on each flex line.
- : run code when a smooth scrolling finishes, instead of relying on timers or scroll polling.
Ready for testing
While not yet available for general use, the following features are available for early testing and feedback. You can test these new features either locally, or on your production website with your own users, by registering for an . 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.Network Efficiency Guardrails: monitor and improve your site's load performance
Complex sites that embed third-party content and are maintained by many different teams tend to run the risk of regressing load performance when strong guidelines and monitor practices are not in place. This is exactly what the Network Efficiency Guardrails feature provides. It surfaces performance violations automatically in production, so your teams can catch and fix them without manually auditing every page. To learn more and test the Network Efficiency Guardrails feature, see .<install>: install web apps with a single HTML element
The new<install> element gives you a browser-trusted install button with no JavaScript required. The browser controls the button's label and appearance, so a user click is a genuine signal of intent. You can even use the installurl attribute to build an app catalog that installs cross-origin web apps. <!-- Install the current app -->
<install></install>
<!-- Install a different app -->
<install installurl="https://awesome-app.com/"></install>
To learn more, and get started, see our blog post: .
CSS Grid Lanes: space efficient masonry layout
Grid Lanes is a new type of CSS layout that allows items to be automatically placed in the next available space, creating a space-efficient masonry-like layout without needing to specify row heights or use JavaScript. Grid Lanes is ideal for galleries, portfolios, and any design where items have varying widths or heights..grid {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
To learn more, check out .