Які нові можливості веб-платформи з'явилися в Microsoft Edge для розробників у вересні 2026?

API для діапазонів тексту у полях вводу

OpaqueRange надає розробникам живий доступ до діапазонів тексту всередині textarea та input. За допомогою цих діапазонів можна викликати getBoundingClientRect і getClientRects, щоб позиціонувати інтерфейс у точкових місцях полів. API також сумісний з CSS Custom Highlight API — це дозволяє створювати власні підсвітки у редагованих областях. Microsoft опублікувало вступне відео та живі демо. Це змінює правила гри.

Проблеми доступності у shadow DOM отримали рішення

Поширений біль розробників, що створюють веб-компоненти з Shadow DOM — зробити їх доступними. Проблема відома як cross-root ARIA. Властивість referenceTarget об'єкта ShadowRoot це вирішує. Її також можна задати через HTML-атрибут shadowrootreferencetarget на елементах. Тепер ID-посилання типу for чи aria-labelledby можна перенаправляти на елементи всередині shadow DOM компонента. Наприклад, label пов'язується з правильним input, навіть якщо той сховаваний у shadow DOM. У статті приведений приклад чекбокса, де шаблон використовує shadowrootmode open і shadowrootreferencetarget real-checkbox.

Складні віджети з кількома діючими частинами довго залишалися недоступними для екранних читалок. Новий HTML-атрибут aria-actions виправляє це — він оголошує другорядні дії віджета. У вкладці з кнопкою закриття ця кнопка отримує aria-actions close-tab, а відповідний span несе той самий id. ARIA Authoring Practices Guide надає приклад вкладок з кнопками дій.

Псевдокласи медіа та керування вікном PWA

Медіа-псевдокласи дозволяють стилізувати video та audio залежно від стану відтворення. Новинки: playing, paused, buffering, muted, stalled. CSS-властивість window-drag дає стандартизований спосіб робити вікна встановлених PWA перетягуваними — це допомагає при роботі з Window Controls Overlay API. Починаючи з Microsoft Edge 151 на Windows, при використанні Window Controls Overlay API заголовок PWA за замовчуванням приховується, що дає більше контролю над виглядом програми.

Методи ітераторів JavaScript та записи продуктивності розширюють інструментарій

Нові методи ітераторів спрощують роботу з ними. Iterator.join повертає рядок — конкатенацію всіх елементів, що генерує ітератор. Iterator.zip і Iterator.zipKeyed створюють нові ітератори, що агрегують елементи з кількох ітерованих об'єктів. Ці методи «застібають» вхідні ітеровані об'єкти разом, дозволяючи одночасну ітерацію. Записи продуктивності soft-navigation та interaction-contentful-paint допомагають покращити швидкодію сучасних односторінкових додатків — вони вимірюють м'які навігації, що оновлюють сторінку без традиційних змін історії браузера. CSS-функція alpha створює новий колір, змінюючи прозорість іншого. textStream тепер доступний на об'єктах Response, Request та Body — це зручніше для інкрементальної обробки тексту без ручного декодування байтових шматків. HTML-елементи camera та microphone — це браузерні кнопки, що дозволяють користувачам увімкнювати/вимикати потоки камери чи мікрофона, а при потребі безпосередньо пов'язують запит дозволу з явною дією користувача.

Функції, готові до тестування: WebMCP та нові інструменти налагодження

WebMCP — веб-API для створення ефективних і швидких робочих процесів співпраці людини з агентом на вашому сайті, які ще й надійні. За допомогою WebMCP ви повторно використовуєте існуючий фронтенд-код і виставляєте його як структуровані інструменти, якими може скористатися браузерний агент, щоб допомогти користувачам виконати завдання. Реалізація специфікації WebMCP у Microsoft Edge готова до тестування. Microsoft підготувало кілька прикладів і розширення для запуску та налагодження ваших WebMCP-інструментів у репозиторії webmcp-labs.

JS Self-Profiling API вимірює продуктивність вашого додатку в продакшні на реальних пристроях користувачів, але він лише зразкує JavaScript сторінки, залишаючи невияснені прогалини в трасі. Microsoft додає маркери зразків, щоб заповнити ці прогалини. Кожен зразок тепер може нести маркер, що ідентифікує, чим займався браузер у момент захоплення: стилізація, розкладка, малювання або збирання сміття. Невяснена прогалина чітко видно як послідовність маркерів розкладки — так ви точно знаходите причину повільної траси. Доступні пояснювальне відео та жива демо. Реєстрація на origin trial теж відкрита.

Починаючи з Edge 153, інструмент Network у DevTools отримує дві нові дії у контекстному меню кожного запиту. Resend — повторно відправляє запит, наприклад XHR чи Fetch. Edit and resend as fetch — створює виклик Fetch API, але не відправляє його одразу, а записує у ввід Console, де ви можете змінити новий запит (заголовки, параметри) і лише тоді надіслати. Ці функції планують замінити експериментальний інструмент Network Console.

Оновлені версії Web Install API та елемента install доступні для тестування. І navigator.install, і елемент install тепер приймають прямий посилання на маніфест цільового додатка. Ви можете встановити поточний додаток через navigator.install або крос-оріджинний веб-додаток, передавши URL маніфесту. Елемент install працює аналогічно через атрибут manifest. Доступні демо та ресурси. Реєстрація на origin trial теж відкрита.

Оновлення екосистеми завершують анонс

Виклик пропозицій для Interop 2027 відкрито і скоро закриється. Microsoft Edge сьома ріка поспіль спонсорить Open Web Docs. Нативний елемент menu на підході — над ним працює спільнота Open UI. Google вже реалізував елемент menubar — протестувати його можна, увімкнувши прапор Experimental Web Platform features на сторінці about://flags.