すべての主要なブラウザ ベンダーとその他の関係者が初めて、ウェブ デベロッパーが特定したブラウザの互換性に関する主要な問題を解決するために集まりました。Interop 2022 では、15 の主要分野でウェブ向けの開発エクスペリエンスが改善されます。この記事では、ここまでの経緯、プロジェクトの焦点、成功の測定方法、進捗状況の追跡方法について説明します。
すべては 2019 年に始まりました
2019 年、Mozilla や Google などは、MDN デベロッパーのニーズ評価アンケートや詳細なブラウザ互換性レポートという形で、デベロッパーの課題を理解するために大規模な取り組みを始めました。これらのレポートにより、ウェブ プラットフォームを使用するデベロッパーの主な課題に対処するための、詳細で実用的な情報が得られ、Compat 2021 の取り組みにつながりました。
特に Compat 2021 は、CSS グリッド（使用率 12% が着実に増加）や CSS Flexbox（77% 使用率）といったパワフルな機能のための強固な基盤の構築につながりました。Flexbox の gap プロパティは、新しいレイアウト メソッドを採用する際の最大の課題を解決するものです。
2021 年末には、すべての実装で 90%を超えるスコアを達成しました。
相互運用 2022 とは
Interop 2022 はベンチマークであり、主要な 3 つのブラウザ実装の代表者によって合意され、サポーター Apple、Bocoup、Google、Igalia、Microsoft、Mozilla の意見を取り入れながら、公式推薦と審査を経て開発されました。
このベンチマークでは 15 の領域に焦点を当てています。これらの領域は、存在しない場合やブラウザ間の互換性に問題がある場合に特に問題となる、デベロッパーによって指摘されている 15 の領域です。すべてのブラウザ ベンダーはこれらの領域に注力することに同意しており、ウェブ開発のエクスペリエンスを大幅に改善することに関与するすべての関係者は喜びを感じています。
15 の重点分野
Interop 2022 では、次の機能に焦点を当てます。新たに 10 のエリアに加え、2021 年の Compat 5 から引き継がれた 5 つのエリアが追加されています。新たに注目すべき分野は次のとおりです。
レイヤをカスケード
カスケード レイヤを使用すると、ウェブ デベロッパーはカスケードをより詳細に制御できます。セレクタをレイヤにグループ化する方法を提供し、それぞれに独自の特異性があります。つまり、セレクタを慎重に並べ替えたり、基本 CSS ルールを上書きするために非常に具体的なセレクタを作成したりする必要はありません。
色空間と CSS 色関数
現在、デザイン システムでカラー関数を使用するには、HSL 値で Sass、PostCSS、または calc() を使用する必要があります。CSS に組み込まれた色の関数により、色を動的に更新でき、新しい色空間によって sRGB 色域の制限と HSL の知覚的制限がなくなります。
CSS Color Level 5 では、ウェブ プラットフォームでより動的なテーマ設定を可能にする 2 つの関数が定義されています。
color-mix(): 2 色を取り、指定された色空間で指定された量だけ混ぜた結果を返します。color-contrast(): 指定した単色とのコントラストが最も高い色を色のリストから選択します。
これらの機能は拡張色空間（LAB、LCH、P3）をサポートし、HSL と sRGB に加えて、デフォルトでユニフォーム LCH 色空間を使用します。
新しいビューポート ユニット
ビューポートのサイズ設定を扱う際の問題は、MDN Browser Compatibility Report 2020 と新しい State of CSS 2021 調査の両方で顕著です。CSS の値と単位レベル 4 では、ビューポートの最大サイズ、最小サイズ、動的なビューポート サイズ（lv*、sv*、dv*）に新しい単位が追加されています。このユニットにより、アドレスバーを考慮しつつ、モバイル デバイスに表示されるビューポート全体に収まるレイアウトを簡単に作成できるようになります。
また、Interop 2022 を担うベンダー横断的なチームも協力して、既存の vh ユニットを含む既存のビューポート測定機能の相互運用性の状態を調査し、改善していく予定です。
スクロール
2021 年スクロール調査レポートによると、スクロール機能とスクロールの互換性は実装が難しく、改善の余地が多数あることが確認されています。ここでは、プラットフォーム間でスクロールの一貫性とスムーズさを高めるために、スクロール スナップ、スクロール動作、オーバースクロール動作に焦点を当てます。
また、新しいスクロール スナップ機能の提案も検討しています。
サブグリッド
grid-template-columns と grid-template-rows の subgrid 値は、display: grid が適用されたグリッド アイテムは、配置される親グリッドの部分からトラック定義を継承できることを意味します。
たとえば、次の 3 つのカード コンポーネントでは、各カードが独立したグリッドを形成しているにもかかわらず、ヘッダーとフッターが隣接するカードのヘッダーとフッターに揃っています。このパターンがうまく機能するのは、各カードが親グリッドの 3 行にまたがるアイテムであり、サブグリッドを使用してそれらの行をカードに継承するためです。
含まれるもの
- CSS Containment（
containプロパティ） <dialog>要素- フォーム コントロール
- タイポグラフィとエンコード:
font-variant-alternates、font-variant-position、icユニット、CJK テキスト エンコードを含む - Web Compat: エンドユーザーに影響するサイトの互換性の問題を引き起こしているブラウザ間の違いに焦点を当てています。
次の領域は Compat 2021 プロジェクトによって大きな進歩がありましたが、まだ改善の余地があります。そのため、残りの問題に対処できるように、相互運用 2022 に追加されました。
- アスペクト比
- Flexbox
- グリッド
- 固定表示
- 変換
調査活動
Interop 2022 では、この 15 の重点分野に加えて、3 つの調査作業を実施します。問題があり、改善が必要な領域ですが、仕様やテストの現在の状態が、テスト結果を使用して進捗状況をスコアリングするには十分ではない分野です。
- 編集中、
contenteditable、execCommand - ポインタとマウスのイベント
- ビューポート測定
ブラウザ ベンダーやその他の関係者は、これらの領域のテストと仕様の改善に協力し、この取り組みの今後のイテレーションに彼らを含めることができるでしょう。
成果の測定と進捗状況の追跡
既存の web-platform-tests ダッシュボードを使用して、15 の重点分野について進捗状況を追跡します。分野ごとに一連のテストが特定されています。これらのテストに対して各ブラウザが評価され、各領域と 15 領域すべてに対する総合スコアが算出されます。
進捗状況や進捗状況については、相互運用 2022 ダッシュボードをご確認ください。1 年を通して、構築するプラットフォームがどのように改善されているかを追跡していくことができます。
これらはデベロッパーにとってどのような意味を持つのでしょうか。
これらの複数年にわたる相互運用性の取り組みは、Compat 2021 や Interop 2022 などの形で、デベロッパーが長年経験してきた課題を十分に認識し、対処することを目標としています。これは 1 つのブラウザでの取り組みではなく、すべての主要なブラウザ ベンダーと友人が協力して、ウェブ プラットフォームを全体的に改善するものです。
基本的には、デベロッパーがウェブ プラットフォームをより使いやすく、信頼性を高めて、ブラウザの不整合に対処する代わりに優れたウェブ エクスペリエンスの構築により多くの時間を費やせるようにすることです。
ご意見をお寄せください
Compat 2021 で行われた改善や、Interop 2022 で追加された機能に関するフィードバックをお待ちしています。次の機能のうち、あなたの仕事に最も大きな違いがあるのはどれですか？本当に楽しみにしていることは何ですか？GitHub リポジトリで問題を報告するか、Twitter でお知らせください。
相互運用 2022 の詳細については、以下をご覧ください。