ニュース
「Microsoft Edge」に新機能多数、CSSやPWA関連、キー入力の「focusgroup」など ～公式ブログに開発者向け新連載
CSSギャップ装飾やオンデバイスAIによる音声認識など盛りだくさん
2026年7月14日 15:02
「Microsoft Edge」には日々、新しいWebプラットフォーム機能（HTML/CSSなど）が導入されている。米Microsoftは7月7日（現地時間）、公式ブログ「Microsoft Edge Blog」で「New in Edge for developers」という開発者向けシリーズを開始し、最近のアップデート内容を紹介している。
CSSギャップ装飾（CSS gap decorations）
ギャップ装飾（CSS gap decorations）は、フレックスやグリッド、マルチカラム（段組み）レイアウトの“隙間”（ギャップ）をCSSで装飾できるようにしたもの。デザイナーが余計なDOM要素を挿入したり、疑似要素を用いたりといった工夫をこらさなくても、ギャップに区切り線を引き、その色や線種を変えたり、線が交差する箇所で区切り方を制御したりといったデザインルールを指定できる。
具体的には「row-rule」プロパティが新設されるほか、既存の「column-rule」プロパティが拡張される。また、行（row）と列（column）をまとめて指定する「rule」ショートハンド、パターン、「repeat()」構文なども利用可能。それぞれの機能はデモサイトで体験できる。
「focusgroup」属性
HTMLの「focusgroup」属性は、キーボードのアクセシビリティ向上を企図した規格。近年はツールバーやタブ、メニューといったコントロールを組み合わせた複雑なウィジェットが少なくないが、それらをひとまとめにして管理し、矢印キーで直感的に操作できるようにする。
キー入力の処理やフォーカス位置の記憶が自動化され、従来必要だったJavaScriptによる実装を省けるのが魅力だ。「focusgroup」は「Edge 150」でオリジントライアル（開発者が実際のWebサイトで実験的な機能を一定期間テストできる仕組み）として提供されている。
PWAのオリジン移行
「プログレッシブ Web アプリ」（PWA）は、Webアプリをシステムにインストールし、ローカルアプリのように扱えるようにする仕組み。
従来はインストール後に提供側がオリジンを変更――たとえば「example.com/app」から「app.example.com」へ移動――する場合、いったんアンインストールして再度インストールする必要があったが、最近のアップデートによりこれが不要となる。
具体的な移行方法は、ドキュメントを参照のこと。
そのほかのWebプラットフォーム機能
そのほかにも、画像をぼかさず拡大する「image-rendering: crisp-edges」、フォーム部品内のテキストを計測・強調できる「OpaqueRange」、テキストをボックス幅にぴったり収まるようフォントサイズを調整する「text-fit」、ユーザーのカラースキームに応じて画像を切り替えられる「light-dark()」関数の画像対応、フレックス行へコンテンツを均等に分配する「flex-wrap: balance」、スムーズスクロールの完了を検知できる「scrollBy()/scrollTo()」の完了Promise、Async Clipboard APIの読み取りパフォーマンス改善などが紹介されている。
オリジントライアルでテスト中の機能
また、オリジントライアルで早期テスト可能な機能として、サイトの読み込みパフォーマンス違反を本番環境で自動検出する「Network Efficiency Guardrails」、JavaScript不要でブラウザー公認のPWAインストールボタンを設置できる「<install>」要素、高さの違うカードを等幅の列に隙間なく詰め込むメイソンリーレイアウトを実現する「CSS Grid Lanes」がアナウンスされた。
さらに、オンデバイスAI関連では、小規模言語モデル「Aion 1.0 Instruct」が利用できるようになった。「Phi-4-mini」よりも小型・高速・高効率で、対応デバイスも大幅に拡大されている。
「Edge」のCanary/Devチャネルでは、「Prompt API」と「Writing Assistance APIs」を通じて利用できる。実際の動作は、デモサイトで確認可能。
また、「Web Speech API」によるオンデバイス音声認識も、Canary/Devチャネルの「Edge 150」以降ではクラウドではなくローカルで処理できる。Webアプリの運用コスト削減やオフライン対応、プライバシー向上につながる。
Webブラウザー間の相互運用性
このほか、ブラウザー間の相互運用性を改善する「Interop 2026」プロジェクトにおいて、「Edge」のテスト合格率が2026年1月から6月の間に77％から97％へ向上したとのこと。「Google Chrome」チームと共同で、AIコーディングエージェントにWeb開発のベストプラクティスを提供するAIスキル「Modern Web Guidance」を開発していることも紹介されている。
