2月14日（日本時間）、ブラウザ間でのWeb標準の相互運用性を向上するプロジェクト「Interop」の2025年プロジェクトが始まりました。

この記事では、Interop 2024の振り返りと、Interop 2025でどのAPIが重点対象として選出されたのかについて触れていきます。

前提知識として、Interopそのものの取り組みについての解説については、昨年書いたInterop 2025のプロポーザル投票が始まりました！をご覧ください。

Interop 2024の振り返り

2025年のInteropプロジェクトについて触れる前に、2024年のInteropプロジェクトについて振り返ってみましょう。

Stable	Experimental

最新の安定版ブラウザでのリリースにおいては全体で95点まで網羅されており、プレリリース版においては97点まで網羅されていました。安定版でのテスト網羅率ではFirefoxが一歩リードしている形となっています。このことより、各ブラウザでのInterop 2024の重点対象がおおよそ網羅していることが示されています。

これまでのInteropプロジェクトでのスコアを比較すると、徐々にテスト網羅率が向上していることもわかります（2023年の安定版は83点、2022年では82点から上昇）。

重点対象となったものの中では、CSS Nesting、Declarative Shadow DOM、text-wrap: balance が100%テストカバレッジを達成しています。前年から続く重点対象個所の中ではMedia Queries 4、Motion Path、Viewport Unitsらが100％に達成しています。

2024年の重点対象リスト

Accessibility
CSS Nesting
Custom Properties
Declarative Shadow DOM
font-size-adjust
HTTPS URLs for WebSocket
IndexedDB
Layout
Pointer and Mouse Events
Popover
Relative Color Syntax
requestVideoFrameCallback
Scrollbar Styling
@starting-style & transition-behavior
Text Directionality
text-wrap: balance
URL

前年から継続している重点対象のリスト

Aspect Ratio
Border Image
Cascade Layers
Color Spaces and Functions
Container Queries
Containment
CSS Math Functions
CSS Pseudo-classes
Dialog Element
Font Feature Detection and Palettes
Forms
:has()
Inert
Masking
Media Queries 4
Modules
Motion Path
Offscreen Canvas
Scrolling
Sticky Positioning
Transforms
Typography and Encodings
Viewport Units
Web Codecs (video)
Web Compat 2022
Web Compat 2023
Web Components

比較までに2024/9/19時点のダッシュボードも掲載しておきます。

Stable	Experimental

Interop 2025での重点対象について

次にInterop 2025で重点対象となったものについて見ていきます。それぞれWPTのテストダッシュボードと対応するMDNのリンクも掲載しておりますので併せてご覧になってみてください。

CSS Anchor positioning

CSS Anchor positioningは、アンカーと呼ばれる要素を基準として特定の要素を、常に画面の特定の位置に固定できるCSSプロパティです。

このCSSプロパティは昨年のInteropで実施されたPopover APIと組み合わせて使用されることが想定されています。

`backdrop-filter`

このCSSプロパティは、要素の背後にある領域でぼかし、カラーシフトなどのグラフィック効果を適用します。例えばガラス細工のような表現をCSSで表現できるようになります。

Core Web Vitals

Largest Contentful Paint（LCP）については、現在Safari/Webkitが、Interaction to Next Paint（INP）はSafari/WebkitとFirefoxの両ブラウザで安定的に使用できない状態のため、Core Web Vitalsという一括りで安定化させるために提案されています。Cumulative Layout Shift（CLS）指標は対象外となります。

Tests

`<details>` element

<details> 要素は展開ウィジェットであり、展開することで追加コンテンツを表示できます。閉じると、入れ子になった <summary> 要素だけが見えます。今年は、最近追加された <details> 要素にまつわる機能をすべてのブラウザで動作させることに焦点を当てます。

::marker と ::details-content の擬似要素
content-visibility を使用して、表示する代わりに内容を切り替えられるようにする
<details> 要素をページ内検索で自動展開できるようにする

さらにこの重点対象には hidden="until-found" 属性も含まれており、ブラウザのページ内検索をするか、URLフラグメントをたどって直接移動するまでの間は要素を隠せるようなります。

Layout

こちらは2024年から継続されているものです。主にflexbox、grid、subgridにまつわるレイアウトのバグについてを解消していきます。

Tests dashboard

Modules

JavaScriptの import 文は、JavaScript modulesを読み込むことができます。さらに type 属性と一緒に使うと、CSS ModulesやJSONデータを読み込むことができます。例えば、import ... with { type： "json" } は、JSONデータ（JSON module scripts）をロードできます。今年はJSON module scriptsのインポート部分に注力していくそうです。

Navigation APIはHistory APIに代わるSPAでのナビゲーションやURLの更新を簡単に扱えるようにするAPIです。このAPIはブラウザのナビゲーション・アクションを開始したり、傍受したり、内容を変更できます。これまでChromeのみの実装でしたが、今年は他のブラウザでも実装されることを目指します。

Pointer and Mouse events

こちらは2024年から継続されているものです。Pointer eventsとMouse eventsは、ユーザーがポインティング・デバイスを操作することによって発生するDOMイベントです。Pointer eventsについては、マウス、タッチペン（スタイラスペン）、タッチ（1本または複数の指など）などのポインティング入力デバイスに対応しています。

`@scope`

このCSSのアットルールを使用すると、特定のDOMサブツリー内の要素を選択できるようになり、要素のスタイルを正確に指定できるようになります。

例えば次の場合のCSSでは特定のクラス内で一致するリンクのカラーを変更できます。

@scope (.light-scheme) {
  a { color: darkmagenta; }
}

@scope (.dark-scheme) {
  a { color: plum; }
}

さらに上限と下限も設定できるため、以下のような範囲指定も可能です。

@scope (.media-object) to (.content > *) {
  img { border-radius: 50%; }
}

.media-object で始まり .content クラスの子クラスまでのすべての子孫を含むDOMフラグメントにある img タグにのみ指定できます。

`scrollend` event

文書のビュー内でスクロールが完了した時に発生するイベントです。これまでは setTimeout() を使用してスクロールが一定時間停止したかどうかをチェックするしかできなかったため、scrollend が導入されることで「スクロールが完了したこと」を正しく検出できるようになります。

document.addEventListener("scrollend", (event) => {
  output.innerHTML = `Document scrollend event fired!`;
});

Storage Access API

Storage Access APIは、認証された埋め込みをサポートしつつ、サードパーティクッキーを削除することが可能になります。主なメソッドは以下の通りです。

document.requestStorageAccess() メソッドは、<iframe> 内のコンテンツがクッキーやその他のサイト・データの保存と読み込みを要求できるようになります
document.hasStorageAccess() メソッドは、そのようなアクセスが許可されているかどうかをチェックします

ただし、Storage Access Headersについてはこの重点箇所の対象外となります。

`text-decoration`

テキストのアンダーライン、オーバーライン、ラインスルー、またはその組み合わせを含む装飾線のスタイルと色を設定できるCSSプロパティです。

今年は、text-decoration プロパティを使用する際に付与されるベンダープレフィックスを不要にすることを目標としています。

URLPattern

URLまたはURLの一部にマッチするパターンを表すURL Pattern APIのインターフェースです。パターンの構文はpath-to-regexpライブラリの構文に基づいています。

const pattern = new URLPattern({ pathname: '/:username' });
const url_1 = new URL('https://example.com/johndoe');
console.log(pattern.test(url_1)); // true
const url_2 = new URL('https://example.com/johndoe/profile');
console.log(pattern.test(url_2)); // false

View Transition API

ウェブサイト上でのさまざまなビュー間をシームレスな視覚的遷移を作成するためのAPIです。

今年は、同一ドキュメントでのView Transition APIを相互運用可能にすることと、view-transition-class CSSプロパティを実装することを目標にしています。

WebAssembly

WebAssembly APIはWebAssemblyコードを読み込むことができるようになるAPIです。

昨年は調査対象として選出されており、WPTフレームワーク内でWebAssembly仕様のテストが実行するためのテストインフラを追加するように進められていました。今年は重点対象となり、以下APIの相互運用に焦点を当てます。

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

Web Compat

Web Compatは特定の技術ではなく、すでにリリースされているAPIであるもののバグやWeb標準からの逸脱によって問題が起きているものたちのグループになります。今年は以下の互換性の問題に焦点を当てます。

appearance（プロポーザル）
zoom（プロポーザル）
list-style-position（プロポーザル）
overscroll-behavior（プロポーザル）
Content Security Policy（プロポーザル）
PefromanceObserver（プロポーザル）
document.caretPositionFromPoint（プロポーザル）

WebRTC

WebRTC APIは、ブラウザ間で直接リアルタイムの通信チャネルを確立するAPIです。ブラウザ内でのビデオ会議アプリケーションなどで使用されていたりします。今年は以下のAPIの相互運用に焦点を当てます。

RTCRtpScriptTransform: クロスブラウザのエンドツーエンドの暗号化を可能にするAPI
RTCDataChannel: 2つのピア間で双方向に任意のデータを転送するためのネットワークチャネル

Writing modes

このCSSプロパティはテキストが水平・垂直にレイアウトされるか、左から右・右から左にレイアウトされるかを設定できるものです。今年は sideways-lr と sideways-rl 値を相互運用できるように焦点を当てます。

さらに overflow-x と overflow-y の論理的プロパティである overflow-inline と overflow-block プロパティの相互運用にも焦点を当てます。これは書き込みモードに関係なくコンテンツがボックスからはみ出した時の動作を制御できるようになります。

Mutation Eventの削除

今年ははじめて機能の削除が重点対象として選ばれました。

DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved はDOMの変更を監視し、DOMの変更が発生したときにイベントリスナーコールバックを実行します。しかし、現在これらはすべて非推奨となっており、MutationObserver APIを使用することが推奨されています。すべてのブラウザでのMutation Eventのサポートを完全に取り除くことを今年の目標としています。

Interop 2025での調査対象について

Interopでは重点対象だけでなく、テスト合格率では進捗を測定できない分野の長期的な相互運用性向上を目的とした調査も実施されています。新しいテスト機能の追加や、プラットフォーム機能のテストカバレッジの拡大などを検討されています。今年は以下が調査対象となります。

Accessibility testing
Gamepad API testing
Mobile testing
Privacy testing
WebVTT

参加企業によるInterop 2025プロジェクト開始にまつわる記事

Apple

Bocoup

Google

https://web.dev/blog/interop-2025?hl=en

Igalia

Microsoft

Mozilla

おわりに

今回の記事ではInterop 2024の振り返りと、Interop 2025の重点対象について紹介しました。

Interop 2025では前回からの継続対象も含めて172件ものプロポーザルが提出されておりました。それぞれのプロポーザルでは重点対象として注目されているものについては多くのリアクションがついており、一番多くのリアクションを集めたのはJPEG XL image formatでした（2/15時点で👍リアクションが448個）。ですが、必ずしもリアクションの多いものが対象に選ばれているわけでもありません。

Interopプロジェクトは各ブラウザベンダ、コンサル企業らの尽力によりWeb標準の相互運用性を高めてもらっています。開発者でもある我々はその恩恵を活用できるようにするためにも、これらの重点対象のものがどのように扱えるものなのかを知っておくことが重要です。

ちなみに重点対象のものが、各ブラウザで利用可能となる機能の指標（Baseline）として追加されると、Web Platform Status DashboardのBaseline 2025リストにも反映されるそうなので、こちらもチェックしておくとよいでしょう。

筆者は前回の記事でも述べた通り、Navigation APIの採用を願っておりましたが、今年ついに重点対象に選出されて大変うれしく思っております。今年のInteropを通じて来年以降に安定した使用ができることを祈り、改めて技術の素振りをしておきたいと思っております。また、View Transition APIの相互運用性も徐々に高まっていき、来年以降でMPA環境での相互運用性も向上していくことを期待しています。

皆さんも今後のInterop 2025の進捗に注目していきましょう。

Discussion