2023 年も、すべての主要なブラウザ ベンダーとその他の関係者が協力して、ブラウザの互換性に関する主要な問題を解決しています。
2023 年には、すべての主要なブラウザ ベンダーとその他の関係者が再び協力して、ブラウザの互換性に関する主要な問題の解決に取り組んでいます。この取り組みは、相互運用 2022 からこの規模で始まりました。Google が達成した内容については、年度末の投稿をご覧ください。すべての関係者は、この機能によって世界中のウェブ デベロッパーのエクスペリエンスが向上すると信じています。今年初めて提案プロセスを公表し、世界中のフレームワーク、大企業、ブラウザ ベンダー、デベロッパーから多くの素晴らしい提案をいただきました。
Interop 2023 の重点分野
今回は 26 以上の重点分野を用意しています。詳細については、プロジェクト ドキュメントをご覧ください。アルファベット順は次のとおりです。
- CSS の枠線画像
- CSS の色空間と関数
- CSS でのコンテナクエリ
- CSS での包含
- CSS 疑似クラス
- CSS のカスタム プロパティ
- Flexbox
- フォント機能の検出とパレット
- フォーム
- グリッド
- :has()
- 不活性
- CSS でのマスキング
- CSS の数学関数
- メディアクエリ
- ウェブワーカーのモジュール
- CSS アニメーションのモーションパス
- 画面外キャンバス
- ポインタとマウスのイベント
- URL
- Web Compat 2023: サイトの互換性に関する既知の問題を引き起こす小さなバグのキャッチオール フォーカス エリア
- ウェブ コーデック（動画）
- ウェブ コンポーネント
すべての重点分野の詳細は、MDN Web Docs に基づく Web Platform Tests で確認できますが、ここでは皆さんが興味を持ちそうなものをいくつかご紹介します。
コンテナクエリ
コンテナクエリは、長年にわたりデベロッパーの皆様から最も多く寄せられたリクエストとなっており、2022 年に Chrome と Safari からリリースされました。Firefox では、Firefox 110 でコンテナ クエリを提供する予定です。この重点分野のテストにより、コンテナ クエリがブラウザをまたいで仕様どおりに確実に動作することを確認できます。
:has(...)
CSS では長い間、親セレクタが必要でしたが、:has() 疑似クラスを使用すると、参照要素に関して前の兄弟要素を選択したり、親セレクタの多くのユースケースに対応したりできます。たとえば、字幕がある図のスタイルとそうでない図のスタイルを変えることができます。has() のユースケースについて詳しくは、ファミリー セレクタの :has() をご覧ください。
カスタム プロパティ
CSS カスタム プロパティ（CSS 変数）を使用すると、スタイルシートで値を一度定義すれば、さまざまな場所で再利用できるため、繰り返しを減らすことができます。たとえば、スタイルシートで共通の色やフォントサイズを一度定義すると、それをコンポーネント間で使用できます。カスタム プロパティの基本サポートは、長年にわたってブラウザで行われてきました。相互運用 2023 では @property のアットルールに重点を置いています。@property はスタイルシートのカスタム プロパティ登録を表します。これにより、プロパティ タイプのチェック、デフォルト値の設定、プロパティが値を継承するかどうかを選択できます。詳しくは、@property: CSS 変数に特殊能力を与えるをご覧ください。
CSS マスキング
CSS マスキングは、グラフィック アプリケーションなどで見られるような画像効果を CSS を使用して適用する方法を提供します。さまざまなマスキング プロパティのサポートが不安定なため、マスキングが必要以上に使いにくくなっています。この重点分野は、デベロッパーがクロスブラウザ対応のクリエイティブな効果を安心して使用できるようにするためのものです。画像に効果を適用する方法について詳しくは、画像のマスキングについての記事をご覧ください。
OffscreenCanvas
<canvas> 要素と Canvas API を使用すると、スクリプト可能な方法で画面にグラフィックを描画できます。ただし、この処理はユーザー操作と同じスレッドで完了するため、パフォーマンスの問題が発生する可能性があります。OffscreenCanvas は、DOM および Canvas API から切り離されたキャンバスをデベロッパーに提供します。デベロッパーは、メインスレッドとは別の Web Worker でレンダリング タスクを実行することもできます。詳しくは、OffscreenCanvas のパフォーマンス上のメリットをご覧ください。
ポインタ イベントとマウスイベント
ポインタ イベントは、マウス、ペン、タッチペン、タッチ スクリーンを使用してページを操作したときに発生します。マウス イベントはマウスの使用時に発生しますが、タップに関する歴史的な理由もあります。ここでは、ページに対するポインタとマウスの操作の動作（ヒットテストやスクロール領域の操作など）について説明します。2023 年の重点分野は、タップとタッチペンを除く。この分野にはウェブ プラットフォーム テストがないため。
WebCodecs
WebCodecs API は、デベロッパーが動画の個々のフレームと音声のチャンクにアクセスするためのメソッドを提供します。ブラウザですでに利用可能なコーデックと、それらとやり取りするためのさまざまなインターフェースへのアクセスを提供します。API を使用して個々のフレームをデコードしてキャンバスにレンダリングする方法については、WebCodecs による動画処理の記事をご覧ください。
ウェブ コンポーネント
ウェブ コンポーネントとは、カスタム要素や Shadow DOM など、再利用可能なコンポーネントの作成に使用されるさまざまなテクノロジーの総称です。Interop 2023 では、これらの基盤テクノロジーの相互運用性の向上に重点を置いています。
ダッシュボード
Interop 2023 ダッシュボードで年間を通して進捗状況を確認できます。すべての主要なブラウザ エンジンについて、現在のスコアと重点分野への対処の状況を確認できます。
フォーカス エリアのスコアは、テストの合格率に基づいて計算されます。フィードバックがある場合や、WPT の改善に貢献する場合は、スコアリングに使用するテストセットの更新をリクエストする問題を報告してください。
