年末に予定されている Compat 2021 の更新は、CSS Flexbox、CSS グリッド、位置: スティッキー、アスペクト比、CSS 変換の 5 つの重点分野におけるブラウザの互換性の問題を排除するための取り組みです。
年末が近づいてまいりましたが、Compat 2021 の最終アップデートが実施されます。これは、5 つの主要な重点分野におけるブラウザの互換性の問題を排除するための取り組みです。
90% 超
すべてのブラウザでのスコア
前回のアップデート以降、すべてのブラウザで改善が行われています。どのブラウザも年初にはテストスコアが大幅に低くなり始めましたが、今ではすべてのブラウザで 90% を超えています。つまり、ウェブ プラットフォームにより、5 つの重点分野の相互運用性が大幅に向上しました。
ブラウザ エンジンへの貢献は、ブラウザ ベンダーだけでなく、ウェブ コミュニティの他の企業からも行われています。このプロジェクトに対して、Igalia には彼らの関与と、引き続きスコアの改善に尽力してくれたことに感謝の意を表します。Igalia は、Compat 2021 の 5 つの重点分野すべての改善に貢献しました。
テスト結果ダッシュボードの wpt.fyi に、Compat 2021 に含まれるすべてのテストを表示するフィルタされたテスト結果ビューと、7 月の最終更新と比較した Chrome、Firefox、Safari のビューが追加されました。
それでは、各領域の改善点を見ていきましょう。
CSS Flexbox
現在、flex-basis: content はすべてのブラウザに実装され、実装は Chromium と WebKit に実装されています。（content 値は Gecko ではすでにサポートされていました）。
Chromium では、Flexbox のサイズに関する問題が修正され、仕様と Gecko の動作が一致します。また、Gecko では、Flex アイテムの高さの割合に関する問題など、Compat 2021 に影響する問題がいくつか修正されています。最後に、WebKit では、より多くのアライメント プロパティ値（left、right、self-start、self-end、start、end）のサポートが追加され、絶対位置設定に多くの改善が行われました。また、Compat 2021 での Flexbox のテスト結果も改善されています。
CSS グリッド
2021 年のウェブ アルゴリズムと Chrome の使用状況の指標の両方からわかるように、ウェブでの CSS グリッドの使用は増え続けています。
Chrome と Edge 93 での GridNG のリリースにより、Grid に関する長年抱えていた多くの問題が解決され、Chromium のバグトラッカーに記録されている 38 件の問題がクローズされました。その後の多数の小規模な改善により、Chromium の Grid の Compat 2021 スコアは 3% から 97% に向上しました。この取り組みは Microsoft の Edge チームが主導しました。
Grid に影響する絶対位置に関するバグは Gecko で修正され、WebKit では多くの修正が行われました。これにより、Grid テストでは Firefox で 1%、Safari で 3% の改善が見られました。
CSS position: sticky
前回のアップデートでは、どのブラウザ（この場合は Chrome と Edge）でも、position: sticky が最初に 100% 合格した領域であることを指摘しました。現在、WebKit の実装におけるいくつかの修正を経て、Safari のスコアも 100% となっています。こうした改善のほとんどは Safari 15 で行われました。
CSS aspect-ratio プロパティ
要素のアスペクト比（幅と高さの比率）を定義するためのブラウザ間のサポートは改善を続けており、Compat 2021 のスコアは Chrome/Edge、Firefox、Safari でそれぞれ 99%、97%、95% に達しています。ほとんどの改善点は aspect-ratio プロパティ自体ではなく、width 属性と height 属性が要素のデフォルトの aspect-ratio 値にマッピングされる仕組みです。これは、WebKit の複数の要素と、Chromium の <canvas> に実装されました。
CSS 変換
transform: perspective(none) のサポートが Chromium、Gecko、WebKit でサポートされるようになりました。これにより、ある視点と視点のないアニメーションを簡単に切り替えられます。
Chromium では、transform-style: preserve-3d（子要素が同じ 3D シーンに参加できるようにする）と perspective プロパティ（子要素に遠近変換を適用する）を子要素にのみ適用することで、仕様に沿ったものになりました。
すべてのブラウザでの CSS 変換のスコアが大幅に増加した主な原因は、テストスイートの改善（誤ったテストが修正または削除された）です。これにより、残りの相互運用性の問題を把握しやすくなり、将来の回帰を回避できます。
まとめ
スコアの多くの改善とテスト インフラストラクチャの改善により、一年を終えるにあたり、皆さまの尽力のおかげです。aspect-ratio は、以前からウェブ デベロッパーからご要望のあった機能でしたが、現在ではすべてのブラウザでサポートされています。Flexbox、グリッド、position: sticky の使用はすべて拡大しており、2021 年に行われた多くの改善のおかげで、これらの機能がブラウザでより適切にサポートされるようになりました。
また次のイベントでお会いできるのをこの取り組みの次のイテレーションでも、他のブラウザ ベンダーや幅広いコミュニティとのコラボレーションを継続できることを嬉しく思います。Google は 2022 年の重点分野について 調査と議論を開始しましたまもなく発表いたします。
ご意見やご質問がございましたら、Twitter（@ChromiumDev）でお問い合わせください。