Compat 2021 の年半ばの更新。これは、CSS Flexbox、CSS グリッド、位置: スティッキー、アスペクト比、CSS 変換の 5 つの重点分野におけるブラウザの互換性の問題を排除するための取り組みです。
今年半ばに Compat 2021 のアップデートが実施されます。これは、5 つの主要な重点分野におけるブラウザの互換性の問題を排除するための取り組みです。#compat2021 の取り組みの詳細と、重点分野の決定方法については、3 月のお知らせをご覧ください。
この投稿で説明する Chromium の改善は、Chrome、Edge、すべての Chromium ベースのブラウザに適用されます。
進捗状況の測定方法
Compat 2021 ダッシュボードで web-platform-tests を確認すると、さまざまなブラウザの合格したテストの数と傾向のグラフを確認できます。
単純な「合格したテスト」の数から、ブラウザの互換性の全容はわかりませんが、この数字は取り組みの進捗状況を確認するために使用するシグナルの 1 つです。テスト結果におけるブラウザ間の差異が小さいほど、複数のブラウザ間でのウェブ機能の相互運用性が向上します。
CSS Flexbox
3 つのブラウザ エンジンのいずれでも、Flexbox の改善が確認されました。
Safari 14.1 には、Flexbox の gap プロパティが搭載されています。gap プロパティは、アイテムの間隔を簡単に設定する方法です。このプロパティはグリッド レイアウトでよく使用され、Flexbox レイアウトでのサポートは、MDN ブラウザ互換性レポートで最もご要望の多かった機能の一つです。このアップデートにより、Flex レイアウトの gap プロパティがすべての主要なブラウザで使用可能になり、互換性に関する主要な課題が解決されます。また、Safari 14.1 では、Flexbox 内のイメージに対する多くの修正が加えられ、以前の回避策が不要になりました。
Firefox はテーブルのレンダリングを Flex アイテムとして解決し、Firefox はテストの 100% 合格に近づきました（現在は 98.5%）。
Chromium では、表をフレキシブル アイテムとしても修正しました。
Chromium 88 では、イメージを Flex アイテムとして書き換え、長年のバグが解決されています。最後に、Chromium では最近、新しいアライメント キーワードのサポート（start、end、self-start、self-end、left、right）が追加されました。以下のキーワードは Chrome Canary と Edge Canary で使用できます。
CSS グリッド
CSS グリッドの使用は着実に増加しており、現在ページビューの 9% を占めています。3 つの主要なブラウザ エンジンはすべて CSS グリッドを実装しており、関連するウェブ プラットフォーム テストの 89% 以上をすでに合格しています。この機能を着実に拡大するには、互換性のギャップを解消することが重要です。
2021 年のこれまでのところ、Safari のテストの合格率は 89% から 93% に向上しています。Chromium では、より多くの CSS Grid の問題を解決するため、GridNG と呼ばれる新しいアーキテクチャの開発に取り組んでいます。これは Microsoft チームが主導する取り組みで、最近ではターゲット グリッド テストが 94% から 97% に増加しました。GridNG については、まもなく Edge のブログで最新情報をお知らせします。
CSS position: sticky
Chromium では、テーブル ヘッダーの position: sticky が TablesNG のリリースに伴って修正されました。これは、テーブルのレンダリングを再設計する数年にわたる取り組みです。この変更と、いくつかの最終
修正により、Chrome と Edge 93 のデベロッパー チャンネルは、ターゲット テストの 100% に合格しました。
position: sticky 以降、TablesNG は 72 件の Chromium バグを解決しました。
CSS aspect-ratio プロパティ
幅と高さの比率を簡単に設定できるようにする aspect-ratio プロパティは、レスポンシブ ウェブ デザインに不可欠です。これは、累積レイアウト シフトを防ぐ解決策でもあります。
aspect-ratio プロパティは、Chrome、Edge、Firefox の安定版と Safari 15 ベータ版でサポートされるようになりました。クロスブラウザ サポートの向上に伴い、使用量が増加しています。
テストに 100% 合格するブラウザはありませんが、aspect-ratio の互換性ギャップは、Compat 2021 の 5 つの重点分野すべての中で最小のものです。すべての主要なブラウザで 90% を超えるテストに合格しています。今後も、このテストスイートを使用して進行状況をモニタリングして、確実な機能にしていきます。
web.dev の aspect-ratio プロパティの使用方法とメリットの詳細を確認する。
CSS 変換
CSS 変換のターゲット テストの結果は、バグの修正とテスト自体の改善により、ゆっくりと着実に改善されています。
また、Chromium チームは transform-style:
preserve-3d と transform :perspective() の相互運用性の改善にも取り組んでいます。次回の更新で、さらなる進展をお知らせしたいと考えています。
総合スコアの改善
3 月の発表以降、3 つのブラウザ エンジンのすべてで Compat 2021 スコアが改善されました。
- Chrome と Edge Dev は 86 から 92 になりました。
- Firefox は 83 から 86 になりました。
- Safari は 64 から 82 になりました。
特筆すべきは、WebKit のコントリビューターの多くの取り組みのおかげで、Safari は互換性のギャップを 18 ポイント縮めることに成功しました。特に、Igalia のチームは aspect-ratio プロパティに貢献し、Flexbox と Grid の多くの改善（Flexbox の gap やさまざまなバグの修正など）を行いました。
Compat 2021 の進捗状況をフォロー
Compat 2021 の進捗状況については、ダッシュボードをご覧になるか、メーリング リストにご登録いただくか、@chromiumdev までご連絡ください。問題が発生した場合は、影響を受けるブラウザのバグを報告してください。