{"slug": "new-in-edge-for-developers-style-layout-gaps-improve-keyboard-accessibility-and", "title": "New in Edge for developers – Style layout gaps, improve keyboard accessibility and migrate your PWA to a new origin", "summary": "Microsoft Edge has introduced new developer features including CSS gap decorations for styling layout gaps, a focusgroup HTML attribute for improved keyboard accessibility, and same-site PWA origin migration to change domains without disrupting users. The updates aim to help web developers build better sites and apps with minimal code.", "body_md": "# New in Edge for developers – Style layout gaps, improve keyboard accessibility and migrate your PWA to a new origin\n\nWelcome 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.\n\nIn this first edition, we’ll look at [CSS gap decorations](#css-gap-decorations) for styling the space between layout items, the [focusgroup attribute](#focusgroup) for easier keyboard navigation, same-site [PWA origin migration](#pwa-origin-migration) for moving an installed web app without disrupting users, and [other improvements](#other-features) 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 [Modern Web Guidance](#modern-web-guidance), an AI coding agent skill helping you write better code.\n\nStyle layout gaps\n\nCSS 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 new `row-rule`\n\nand extended `column-rule`\n\nproperties, as well as the `rule`\n\nshorthand, support colors, patterns, and even the `repeat()`\n\nsyntax for rich, consistent designs with minimal CSS.\n\n```\n.grid {\n  display: grid;\n  gap: 16px;\n  row-rule: 1px solid #ccc;\n  column-rule: 2px solid #333;\n}\n```\n\nLearn more about [CSS gap decorations](https://developer.chrome.com/blog/gap-decorations-stable) and try our [interactive playground](https://microsoftedge.github.io/Demos/css-gap-decorations/playground.html).\n\nImprove keyboard accessibility with focusgroup\n\nThe `focusgroup`\n\nHTML attribute gives you arrow key navigation for composite widgets, such as toolbars, tabs, or menus, for free. With the `focusgroup`\n\nattribute you get automatic arrow key handling and focus memory, without any custom JavaScript roving tabindex code.\n\nTo learn more, check out [Making keyboard navigation effortless](https://blogs.windows.com/msedgedev/2026/03/05/making-keyboard-navigation-effortless/).\n\nMigrate your PWA to a new origin\n\nYou can now seamlessly migrate your Progressive Web App (PWA) to a new, same-site origin, preserving user installations and permissions.\n\nWhen a user installs a PWA, its identity is bound to its web origin (for example, `example.com/app`\n\n). 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`\n\ncan happen without interruption to your users.\n\nTo learn more, see [Seamless PWA origin migration: Change domains without losing users](https://developer.chrome.com/blog/seamless-pwa-origin-migration).\n\nAnd many other features\n\nWe’ve added many more web platform features to Microsoft Edge over the past fews releases. Check out the links below to find out more:\n\n[image-rendering: crisps-edges](https://learn.microsoft.com/microsoft-edge/web-platform/release-notes/149#image-rendering-crisp-edges): scale an image in a way that preserves contrast and edges, without smoothing colors or introducing blur.[OpaqueRange for form control text](https://learn.microsoft.com/microsoft-edge/web-platform/release-notes/149#opaquerange-for-form-control-text): measure, highlight, and anchor UI to the text inside`<input>`\n\nand`<textarea>`\n\nwithout mirror-div hacks.[Performance improvements when reading clipboard data](https://developer.chrome.com/blog/selective-format-read): the Async Clipboard API now defers reading clipboard data until you call the getType() method.[text-fit](https://learn.microsoft.com/microsoft-edge/web-platform/release-notes/150#css-text-fit-property): scale the font-size of a text node so it perfectly fits the width of the box.[light-dark() function for images](https://learn.microsoft.com/microsoft-edge/web-platform/release-notes/150#css-light-dark-with-image-values): easily switch images based on the user’s preferred color scheme.[flex-wrap: balance](https://learn.microsoft.com/microsoft-edge/web-platform/release-notes/150#flex-wrapbalance): distribute the content of a flexbox layout on each flex line.[scrollBy() / scrollTo() completion promises](https://learn.microsoft.com/microsoft-edge/web-platform/release-notes/150#get-notified-when-the-scrollby-and-scrollto-methods-complete): run code when a smooth scrolling finishes, instead of relying on timers or scroll polling.\n\nFor even more updates, check out our [web platform release notes](https://learn.microsoft.com/microsoft-edge/web-platform/release-notes/).\n\n## Ready for testing\n\nWhile 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 [origin trial](https://learn.microsoft.com/microsoft-edge/origin-trials/).\n\nYour feedback is crucial to help us shape these next features and ensure they meet your needs as developers, and the needs of your users.\n\n### Network Efficiency Guardrails: monitor and improve your site’s load performance\n\nComplex 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.\n\nThis 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.\n\nTo learn more and test the Network Efficiency Guardrails feature, see [Monitor and improve your web app’s load performance](https://blogs.windows.com/msedgedev/2026/03/17/monitor-and-improve-your-web-apps-load-performance/).\n\n### <install>: install web apps with a single HTML element\n\nThe new `<install>`\n\nelement 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.\n\nYou can even use the `installurl`\n\nattribute to build an app catalog that installs cross-origin web apps.\n\n``` php\n<!-- Install the current app -->\n<install></install>\n\n<!-- Install a different app -->\n<install installurl=\"https://awesome-app.com/\"></install>\n```\n\nTo learn more, and get started, see our blog post: [Install web apps with the new HTML install element](https://developer.chrome.com/blog/install-element-ot).\n\n### CSS Grid Lanes: space efficient masonry layout\n\nGrid 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.\n\nGrid Lanes is ideal for galleries, portfolios, and any design where items have varying widths or heights.\n\n```\n.grid {\n  display: grid-lanes;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n}\n```\n\nTo learn more, check out [our demos](https://github.com/MicrosoftEdge/Demos/blob/main/css-masonry/README.md).\n\n### New models and APIs for on-device AI\n\nOur developer preview of the pre-release Aion-1.0-Instruct small language model is now available to use with the [Prompt API](https://learn.microsoft.com/microsoft-edge/web-platform/prompt-api#the-aion-10-instruct-model) and [Writing Assistance APIs](https://learn.microsoft.com/microsoft-edge/web-platform/writing-assistance-apis#the-aion-10-instruct-model) in Microsoft Edge.\n\nAion-1.0-Instruct is smaller, faster, and more efficient than Phi-4-mini. It also expands support to significantly more devices.\n\nCheck out our [playground samples](https://microsoftedge.github.io/Demos/built-in-ai/playgrounds/prompt-api/) and share your feedback on [GitHub](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1012).\n\nThat’s not all, starting with Microsoft [Edge Canary or Dev](https://www.microsoft.com/edge/download/insider) 150, you can now also use the WebSpeech API to [convert speech to text by using a local model](https://learn.microsoft.com/microsoft-edge/web-platform/speech-recognition-api), rather than a cloud-based solution.\n\nWith on-device speech recognition support in Microsoft Edge, you can reduce your web app’s running cost, be network independent, and improve privacy for your users.\n\nTo learn more about Aion-1.0-Instruct, on-device speech recognition, and other on-device AI API updates, see [Expanding on‑device AI in Microsoft Edge: New models and APIs for the web](https://blogs.windows.com/msedgedev/2026/06/02/expanding-on-device-ai-in-microsoft-edge-new-models-and-apis-for-the-web/).\n\n## News from across the web platform\n\nBeyond individual features, we also want to highlight a few updates from across the web platform and the broader web ecosystem.\n\n### Interop 2026 progress\n\nThe web moves forward by responding to new end-user and developer needs, and this is therefore a big part of what we do. But we also know that you need stability and consistency to build on. That’s why we’ve been [participating](https://blogs.windows.com/msedgedev/tag/interoperability/) in the [Interop project](https://github.com/web-platform-tests/interop/) for the past five years, working with other browser vendors to identify and fix interoperability issues across browsers.\n\nThis work is crucial to ensure that the web remains a healthy ecosystem where developers can build with confidence, and users can access content and applications regardless of their choice of browser.\n\nInterop 2026, the latest round of the project, is now well underway, and we’ve already made significant progress in fixing the issues identified during the planning phase. Between January and June 2026, Microsoft Edge’s test pass rate increased from 77% to 97%, and we’re hard at work on features such as [Scoped custom element registries](https://web-platform-dx.github.io/web-features-explorer/features/scoped-custom-element-registries/) and [WebTransport](https://web-platform-dx.github.io/web-features-explorer/features/webtransport/).\n\nCheck out the [Interop dashboard](https://wpt.fyi/interop-2026) for more details on this year’s focus areas and the progress made by all participating browsers.\n\nModern web guidance\n\nWe’ve partnered with the Google Chrome team to bring [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance) to web developers. This ambitious project gives developers AI skills they can use with their AI coding agents, to build better web apps based on best practices under rigorous evals.\n\nWe want to hear from you about this project. Did you try it? Did you find the results helpful? Are there other features you’d like to see included? Please let us know by using [the public repo](https://github.com/GoogleChrome/modern-web-guidance-src/issues).\n\n## Closing words\n\nOn the Microsoft Edge web platform team, we’re always listening to what users and web developers need, and pushing for a better, more capable web. Our work is never done; a healthy web is one that keeps improving to meet ever evolving needs.\n\nWe hope these recent feature additions and early experiments are useful to you and your users.\n\nAs always, let us know your feedback and other unsolved use cases. With your help, we can make your lives as developers easier, and your web products better for users.\n\n[Surface Pro](https://www.microsoft.com/surface/devices/surface-pro)\n\n[Surface Laptop](https://www.microsoft.com/surface/devices/surface-laptop)\n\n[Surface Laptop Ultra](https://www.microsoft.com/en-us/surface/devices/surface-laptop-ultra?icid=DSM_Footer_WhatsNew_SurfaceLaptopUltra)\n\n[Surface RTX Spark Dev Box](https://www.microsoft.com/en-us/surface/devices/surface-rtx-spark-dev-box?icid=DSM_Footer_WhatsNew_SurfaceRTXSparkDevBox)\n\n[Copilot for organizations](https://www.microsoft.com/en-us/microsoft-copilot/organizations?icid=DSM_Footer_CopilotOrganizations)\n\n[Copilot for personal use](https://www.microsoft.com/en-us/microsoft-copilot/for-individuals?form=MY02PT&OCID=GE_web_Copilot_Free_868g3t5nj)\n\n[Explore Microsoft products](https://www.microsoft.com/en-us/microsoft-products-and-apps)\n\n[Windows 11 apps](https://www.microsoft.com/en-us/windows/apps-for-windows?icid=DSM_Footer_WhatsNew_Windows11apps)\n\n[Account profile](https://account.microsoft.com/)\n\n[Download Center](https://www.microsoft.com/en-us/download)\n\n[Microsoft Store support](https://go.microsoft.com/fwlink/?linkid=2139749)\n\n[Returns](https://www.microsoft.com/en-us/store/b/returns)\n\n[Order tracking](https://www.microsoft.com/en-us/store/b/order-tracking)\n\n[Certified Refurbished](https://www.microsoft.com/en-us/store/b/certified-refurbished-products)\n\n[Microsoft Store Promise](https://www.microsoft.com/en-us/store/b/why-microsoft-store?icid=footer_why-msft-store_7102020)\n\n[Flexible Payments](https://www.microsoft.com/en-us/store/b/payment-financing-options?icid=footer_financing_vcc)\n\n[Microsoft in education](https://www.microsoft.com/en-us/education)\n\n[Devices for education](https://www.microsoft.com/en-us/education/devices/overview)\n\n[Microsoft Teams for Education](https://www.microsoft.com/en-us/education/products/teams)\n\n[Microsoft 365 Education](https://www.microsoft.com/en-us/education/products/microsoft-365)\n\n[How to buy for your school](https://www.microsoft.com/education/how-to-buy)\n\n[Educator training and development](https://education.microsoft.com/)\n\n[Deals for students and parents](https://www.microsoft.com/en-us/store/b/education)\n\n[AI for education](https://www.microsoft.com/en-us/education/ai-in-education)\n\n[Microsoft AI](https://www.microsoft.com/en-us/ai?icid=DSM_Footer_AI)\n\n[Microsoft Security](https://www.microsoft.com/en-us/security)\n\n[Dynamics 365](https://www.microsoft.com/en-us/dynamics-365)\n\n[Microsoft 365](https://www.microsoft.com/en-us/microsoft-365/business)\n\n[Microsoft Power Platform](https://www.microsoft.com/en-us/power-platform)\n\n[Microsoft Teams](https://www.microsoft.com/en-us/microsoft-teams/group-chat-software)\n\n[Microsoft 365 Copilot](https://www.microsoft.com/en-us/microsoft-365-copilot?icid=DSM_Footer_Microsoft365Copilot)\n\n[Small Business](https://www.microsoft.com/en-us/store/b/business?icid=CNavBusinessStore)\n\n[Azure](https://azure.microsoft.com/en-us/)\n\n[Microsoft Developer](https://developer.microsoft.com/en-us/)\n\n[Microsoft Learn](https://learn.microsoft.com/)\n\n[Support for AI marketplace apps](https://www.microsoft.com/software-development-companies/offers-benefits/isv-success?icid=DSM_Footer_SupportAIMarketplace&ocid=cmm3atxvn98)\n\n[Microsoft Tech Community](https://techcommunity.microsoft.com/)\n\n[Microsoft Marketplace](https://marketplace.microsoft.com?icid=DSM_Footer_Marketplace&ocid=cmm3atxvn98)\n\n[Software companies](https://www.microsoft.com/software-development-companies?icid=DSM_Footer_SoftwareCompanies&ocid=cmm3atxvn98)\n\n[Visual Studio](https://visualstudio.microsoft.com/)\n\n[Careers](https://careers.microsoft.com/)\n\n[About Microsoft](https://www.microsoft.com/about)\n\n[Company news](https://news.microsoft.com/source/?icid=DSM_Footer_Company_CompanyNews)\n\n[Privacy at Microsoft](https://www.microsoft.com/en-us/privacy?icid=DSM_Footer_Company_Privacy)\n\n[Investors](https://www.microsoft.com/investor/default.aspx)\n\n[Diversity and inclusion](https://www.microsoft.com/en-us/diversity/default?icid=DSM_Footer_Company_Diversity)\n\n[Accessibility](https://www.microsoft.com/en-us/accessibility)\n\n[Sustainability](https://www.microsoft.com/en-us/corporate-responsibility/sustainability?icid=DSM_Footer_Sustainability)\n\n[Consumer Health Privacy](https://go.microsoft.com/fwlink/?linkid=2259814)\n\n[Sitemap](https://www.microsoft.com/en-us/sitemap1.aspx)\n\n[Contact Microsoft](https://support.microsoft.com/contactus)\n\n[Privacy](https://go.microsoft.com/fwlink/?LinkId=521839)\n\n[Manage cookies](#)\n\n[Terms of use](https://go.microsoft.com/fwlink/?LinkID=206977)\n\n[Trademarks](https://go.microsoft.com/fwlink/?linkid=2196228)\n\n[Safety & eco](https://go.microsoft.com/fwlink/?linkid=2196227)\n\n[Recycling](https://www.microsoft.com/en-us/legal/compliance/recycling)\n\n[About our ads](https://choice.microsoft.com)", "url": "https://wpnews.pro/news/new-in-edge-for-developers-style-layout-gaps-improve-keyboard-accessibility-and", "canonical_source": "https://blogs.windows.com/msedgedev/2026/07/07/new-in-edge-for-developers-style-layout-gaps-improve-keyboard-accessibility-and-migrate-your-pwa-to-a-new-origin/", "published_at": "2026-07-07 16:04:36+00:00", "updated_at": "2026-07-07 16:31:46.483045+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Microsoft Edge", "CSS", "PWA", "HTML"], "alternates": {"html": "https://wpnews.pro/news/new-in-edge-for-developers-style-layout-gaps-improve-keyboard-accessibility-and", "markdown": "https://wpnews.pro/news/new-in-edge-for-developers-style-layout-gaps-improve-keyboard-accessibility-and.md", "text": "https://wpnews.pro/news/new-in-edge-for-developers-style-layout-gaps-improve-keyboard-accessibility-and.txt", "jsonld": "https://wpnews.pro/news/new-in-edge-for-developers-style-layout-gaps-improve-keyboard-accessibility-and.jsonld"}}