Interop 2022 の成功例の続き Interop 2023 を取り上げます。 すべての主要なブラウザ ベンダーやその他の関係者と再びコラボレーションできることを嬉しく思います。 共通の目標は、ウェブ プラットフォーム それによってデベロッパーの作業が簡素化され、インターネット ユーザーの全体的なエクスペリエンスが向上します。
相互運用は基本的に、ウェブ標準に対する Google との共同の取り組みに基づいて個々のブラウザのコンプライアンスを評価する包括的な一連のテストとベンチマークです。 最終的には、ブラウザ間の不整合を排除し、業界内の統一されたビジョンを育むことを目指しています。
相互運用 2024 については、機能の初期リストを調達するための公開提案プロセスがありました。 このリストを元に、すべての関係者が協力して 2024 年の重点分野のリストを作成しました。 以下は、選択したテストの 100% が年末までに合格することを期待している分野です。
2024 年のすべての重点分野
Interop 2024 には、新たに 12 の重点分野が含まれます。 2023 年から引き継いだ 5 に修正点がいくつかあります。 その分野は次のとおりです。
- ユーザー補助
- CSS ネスト
- カスタム プロパティ
- 宣言型 Shadow DOM
- font-size-adjust
- WebSocket 用の HTTPS URL
- IndexedDB
- レイアウト
- ポインタとマウスのイベント
- ポップオーバー
- 相対色の構文
- requestVideoFrameCallback
- スクロールバーのスタイル設定
- @starting-style と transition-behavior
- テキストの方向
- テキスト折り返し: Balance
- URL
すべての重点分野の詳細を確認するには、相互運用 2024 ダッシュボードにアクセスしてください。 必要な機能や作業の詳細が示されます。 各ブラウザの現在のスコアも表示されます。 この記事の残りの部分では 100% を達成するには、Chrome でどの部分に労力を割く必要があるかを把握できます。
ネスト
CSS のネスト セレクタの構文を定義します。 スタイルルールを別のスタイルルール内にネストできます 親ルールのセレクタに対する子ルールのセレクタの相対値になります。
CSS のネストは、CSS プリプロセッサによってプリコンパイルされるのではなく、ブラウザによって解析されるという点で、Sass などの CSS プリプロセッサとは異なります。
CSS のネストは、CSS スタイルシートの読みやすさ、モジュール性、保守性に役立ちます。 また、CSS ファイルのサイズを小さくして、 ユーザーがダウンロードするデータの量を減らすことができます。
CSS ネストはすべてのブラウザでサポートされていますが、 仕様の変更により、実装にいくつかの違いがあります。 Interop 2024 の期間中は、すべてのブラウザで最新の仕様に準拠させることを目的としています。
CSS ネストの詳細 仕様の重要な更新を見つけて ベア要素のタグ名のネスト。
テキスト折り返し: Balance
CSS の text-wrap の残高値 プロパティを使用して、テキスト行のバランスを取ることをブラウザに伝えます。 通常は、入力ミスを防ぐために見出しやその他の短いテキスト セクションで使用されます。
<ph type="x-smartling-placeholder">
このプロパティの縦型と短縮版は、ブラウザによってサポート状況が異なります。 相互運用 2024 中は、これらを相互運用可能にすることを目指しています。
見出しなどの短いテキスト セクションのバランス調整は、デベロッパーから頻繁にリクエストされる機能です。 詳しくは、CSS text-wrap: balance をご覧ください。 「ウェブ上のタイポグラフィ ウィドウズの終結」という投稿。 または 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 キーワードは実装されていません。
これらのテストは Interop 2024 に含まれています。
この機能でできることについては、 CSS 相対色の構文
相互運用 2024 ダッシュボード
これまでと同様に 試験運用版および安定版ブラウザのリリースの現在のスコアは、 ダッシュボードでスコアがどのように設定されているかを確認できます。
<ph type="x-smartling-placeholder">
今年は、すべての重点分野をどの程度改善できるのか、とても楽しみです。