Interop 2022 と Interop 2023 の成功に続き、主要なブラウザ ベンダーやその他の関係者と再びコラボレーションできる機会をうれしく思います。Google と Google は共通の目標は、ウェブ プラットフォーム間の相互運用性を強化し、デベロッパーの作業を簡素化し、インターネット ユーザーの全体的なエクスペリエンスを向上させることです。
相互運用性はその中核をなす一連のテストとベンチマークを包括的に行うもので、ウェブ標準に対する Google の共同取り組みに基づき、個々のブラウザの準拠状況を評価することを目的としています。最終的には、ブラウザ間の不整合をなくし、業界内で統一されたビジョンを促進することを目指しています。
相互運用 2024 では、機能の初期リストを調達するための公開提案プロセスがありました。このリストから、すべての関係者が協力して 2024 年の重点分野のリストを作成しました。 年末までに、選択したテストの 100% に合格することが期待されている分野を以下に示します。
2024 年のすべての重点分野
相互運用 2024 には 12 の新しい重点分野に加えて、2023 年から引き継がれた 5 つの重点分野があり、いくつかの修正はまだ行われていません。領域は次のとおりです。
- ユーザー補助
- CSS ネスト
- カスタム プロパティ
- 宣言型 Shadow DOM
- font-size-adjust
- WebSocket 用の HTTPS URL
- IndexedDB
- レイアウト
- ポインタとマウスのイベント
- ポップオーバー
- 相対色の構文
- requestVideoFrameCallback
- スクロールバーのスタイル設定
- @starting-style と transition-behavior
- テキストの向き
- テキストの折り返し: バランス
- URL
すべての重点分野の詳細を確認するには、相互運用 2024 ダッシュボードにアクセスしてください。ここには、必要な機能と作業の詳細と、各ブラウザの現在のスコアが表示されます。この記事の残りの部分では、Chrome が 100% に達するために最も労力を費やす必要がある領域について説明します。
ネスト
CSS のネスト モジュールでは、セレクタをネストするための構文が定義されています。これにより、親ルールのセレクタを基準とする子ルールのセレクタを使用して、スタイルルールを別のスタイルルール内にネストできます。
CSS のネストは、CSS プリプロセッサによってプリコンパイルされるのではなく、ブラウザによって解析されるという点で、Sass などの CSS プリプロセッサとは異なります。
CSS のネストは、CSS スタイルシートの読みやすさ、モジュール性、保守性の向上に役立ちます。また、CSS ファイルのサイズを縮小できるため、ユーザーがダウンロードするデータの量も削減できる可能性があります。
すべてのブラウザが CSS のネストをサポートしていますが、仕様の変更により実装に違いがあります。Interop 2024 では、すべてのブラウザが最新の仕様に従うことを目指します。
CSS のネストの詳細をご覧ください。また、ベア要素のタグ名のネストを可能にする仕様の重要な更新情報をご確認ください。
テキストの折り返し: バランス
CSS の text-wrap プロパティの値は、テキスト行のバランスを取ることをブラウザに伝えます。通常は、タイポグラフィ ウィンドウを避けるために、見出しやその他の短いテキスト セクションで使用されます。
このプロパティのサポートはブラウザによって異なります。Interop 2024 では、これらを相互運用可能にすることを目指しています。
見出しなどの短いテキスト セクションのバランス調整は、デベロッパーから頻繁にリクエストされる機能です。詳細については、CSS text-wrap: balance、ウェブ上のタイポグラフィ ウィンドウの終了、テキスト折り返しを使用した CSS テキスト バランシング: バランスの投稿をご覧ください。
WebSocket の HTTP(s) URL
WebSocket コンストラクタはもともと ws: URL と wss: URL を必要としていたため、相対 URL の使用と回避策 コードの使用ができませんでした。
仕様が更新され、http(s) スキーム、つまり相対 URL も使用できるようになりました。これらは ws: と wss: に正規化されています。相互運用 2024 年中に、http(s) スキームをサポートするように実装が更新されます。
相対色の構文
相対色構文は CSS Color 5 仕様で定義されており、CSS で色を操作する方法を提供します。たとえば、色を暗く、明るくしたり、彩度を低くしたりできます。
相対カラー構文はおおむね相互運用可能ですが、ブラウザに currentcolor キーワードは実装されていません。これらのテストは相互運用 2024 に含まれています。
この機能でできることについては、CSS 相対色構文をご覧ください。
Interop 2024 ダッシュボード
これまでと同じく、試験運用版および安定版のブラウザのリリースに関する現在のスコアは、ダッシュボードで公開されるため、スコアの変化を確認できます。
今年は、すべての重点分野にさらなる改善が加えられることを楽しみにしています。