Interop 2025: ウェブ プラットフォームのさらなる改善  |  Blog  |  web.dev

公開日: 2025 年 2 月 13 日

Interop 2024 の大成功を受けて、このプロジェクトは 2025 年の新しい重点分野とともに再開されます。今年寄せられたすべての提案をリストに含めることはできませんでしたが、最終的なリストには、CSS からパフォーマンス関連の機能まで、ウェブ プラットフォーム全体にわたる提案が含まれています。

2025 年の重点分野

• アンカーの配置
• backdrop-filter
• Core Web Vitals
• <details> 要素
• レイアウト
• モジュール
• Navigation API
• ポインタとマウスのイベント
• ミューテーション イベントを削除する
• @scope
• scrollend 件のイベント
• Storage Access API
• text-decoration
• URLPattern
• View Transition API
• WebAssembly
• ウェブの互換性
• WebRTC
• 書き込みモード

また、昨年と同様に、調査対象となる分野がいくつかあります。これらの領域は、重点領域として含めるには十分な情報やテストがないため、グループでは、これらの領域を重点領域に含めることができる段階にするために、いくつかの作業を行う必要があると考えています。

• ユーザー補助機能のテスト
• Gamepad API のテスト
• モバイルテスト
• プライバシー テスト
• WebVTT

今年のプロジェクトでプラットフォームに導入されるこれらの機能と改善点にご期待ください。また、昨年と同様に、このプロジェクトでは、一連の機能をベースラインとして新たに利用できるようになります。この記事では、リストに記載されている機能の一部について詳しく説明します。また、詳細を確認できる情報へのリンクも記載しています。

wpt.fyi/interop-2025 の Interop 2025 ダッシュボードで確認できます。ベースラインの新規利用可能になると、webstatus.dev のベースライン 2025 リストにも表示されます。

CSS と UI

Interop 2025 に含まれる機能のいくつかは、CSS の現状に関する 2024 年のアンケートで重要と回答された機能です。より美しく、パフォーマンスの高いユーザー エクスペリエンスを実現できます。

アンカーの位置

この機能を使用すると、配置された要素をアンカーに固定できます。ポップオーバーを表示する場合に特に便利です。

この機能をベースラインに組み込むことで、サードパーティ ライブラリに依存することなく、ユーザー インターフェースを簡単に作成できるようになります。詳しくは、アンカー ポジショニングのドキュメントと MDN の CSS アンカー ポジショニングをご覧ください。

同じドキュメント内のビューの遷移

また、今年はビュー遷移（特に同じドキュメント内のビュー遷移）と view-transition-class CSS プロパティも追加されています。

ビュー遷移の詳細については、シングルページ アプリケーションの同一ドキュメントのビュー遷移とビュー遷移の MDN ドキュメントをご覧ください。

backdrop-filter プロパティ

backdrop-filter プロパティは、2024 年 9 月以降、ベースラインとして新規に利用可能になりました。コンテンツの背後にエフェクトを作成できます。たとえば、グラフィック アプリケーションでのみ利用できると思われるぼかしやエフェクトを作成できます。

ほとんどの部分で相互運用可能であるにもかかわらず、backdrop-filter の失敗したテスト から、これらの実装にバグや問題があることがわかります。これらの問題はすべてのユーザーに発生するわけではありませんが、多くのユーザーが遭遇していることは認識しています。この機能が正常に動作するようになれば幸いです。

<details> 要素

<details> 要素は開示ウィジェットで、展開すると追加のコンテンツが表示されます。<details> 要素自体はベースラインの「広く使用可能」です。ただし、最近追加された関連機能がいくつかあり、<details> をより便利にしています。

• ::marker と ::details-content の CSS 疑似要素。
• display ではなく content-visibility を使用してコンテンツを切り替える。
• ページ内検索の一致で <details> 要素が自動的に展開される。
• hidden="until-found" 属性: ブラウザのページ内検索を使用して要素が検出されるまで、または URL フラグメントに沿って直接移動されるまで、要素を非表示にします。

CSS @scope アットルール

@scope アットルールを使用すると、セレクタを DOM のサブツリーにスコープ設定したり、ツリーの上限と下限を選択したりできます。たとえば、次の CSS は、.card クラスの要素内の <img> 要素のみを選択します。

@scope (.card) {
  img {
    border-color: green;
  }
}

次の例では、上限と下限を使用しています。<img> 要素は、.card クラスの要素と .card__content クラスの要素の間にある場合にのみ選択されます。

@scope (.card) to (.card__content) {
  img {
    border-color: green;
  }
}

@scope の使用方法の例については、CSS @scope アットルールを使用してセレクタの範囲を制限すると MDN の @scope のドキュメントをご覧ください。

scrollend イベント

scrollend イベントがないと、スクロールが完了したことを検出する信頼できる方法はありません。setTimeout() を使用して、スクロールが一定時間停止しているかどうかを確認するのが最善の方法です。これは、スクロールが終了したイベントではなく、スクロールが一時停止したイベントに近くなります。

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend イベントを使用すると、ブラウザが複雑な評価をすべて行います。

document.onscrollend = event => {
  // ...
}

その他の例については、Scrollend、新しい JavaScript イベントと scrollend の MDN ドキュメントをご覧ください。

text-decoration プロパティ

text-decoration プロパティは、text-decoration-line、text-decoration-color、text-decoration-style、text-decoration-thickness の省略形です。ベースラインの広範な利用が可能なプロパティと見なされますが、Safari では、接頭辞のないショートカット プロパティで動作するのは text-decoration-line のみです。2025 年中に解決される予定です。

書き込みモード

CSS の writing-mode プロパティには、いくつかの有効な値があります。その多くは、垂直方向に表示されるスクリプトをレイアウトするように設計されています。ただし、言語サポートの理由ではなく、デザインの一部としてテキストを縦方向に配置したい場合があります。sideways-lr 値と sideways-rl 値は、この目的のために設計されていますが、ブラウザの互換性が低いという問題があります。この問題は 2025 年中に修正される予定です。

また、論理 CSS プロパティ overflow-inline と overflow-block も含まれています。これにより、書き込みモードに関係なく、コンテンツがボックスから溢れたときの処理を制御できます。

Core Web Vitals

ウェブに関する主な指標は、サイトのエクスペリエンスを定量化して改善の余地がある領域を特定するのに役立ちます。ウェブバイタル イニシアチブは、状況を簡素化し、サイトが最も重要な指標である Core Web Vitals に集中できるようにすることを目的としています。

Interop 2025 には、LargestContentfulPaint API と Event Timing API をブラウザ間で実装することで、Largest Contentful Paint（LCP）と Interaction to Next Paint（INP）の指標が含まれています。Cumulative Layout Shift（CLS）指標は対象外です。

LCP API

Event Timing API（INP 用）

WebAssembly（Wasm）

WebAssembly API を使用すると、ポータブルなバイナリ命令形式である WebAssembly コードを読み込むことができます。これにより、すべてのサーバー要件を含むブログ アプリケーション全体をブラウザで実行できます。

今年は、以下の機能に重点を置いて取り組んでいきます。

• JavaScript 文字列組み込み関数: WebAssembly 組み込み文字列関数を JavaScript String API のサブセットにミラーリングし、JavaScript グルーコードなしで呼び出せるようにします。
• サイズ変更可能なバッファの統合: サイズ変更可能なバッファを使用する JavaScript コードに WebAssembly を統合します。

機能の削除

今年のプロジェクトには、プラットフォームからの削除が含まれています。ミューテーション イベントは非推奨になり、ベースラインで広く利用可能な、はるかに高いパフォーマンスの Mutation Observer API に置き換えられました。Chrome では Chrome 126 でこれらのイベントが削除されました。このフォーカス エリアでは、すべてのブラウザからこれらのイベントを削除します。

これらのイベントの歴史と削除の理由については、Chrome からミューテーション イベントが削除されますをご覧ください。

その他の情報

機能の一覧については、プロジェクトの README をご覧ください。また、Interop 2025 に取り組んでいる他の企業の投稿もご覧ください。

• Apple
• Bocoup
• Igalia
• Microsoft
• Mozilla