このページは Cloud Translation API によって翻訳されました。

Compat 2021: ウェブの互換性に関する 5 つの主な問題を排除

Google は、他のブラウザベンダーや業界パートナーと協力して、ウェブデベロッパーがブラウザの互換性に関する上位 5 つの課題（CSS Flexbox、CSS Grid、position: sticky、aspect-ratio、CSS 変換）を解決しています。

Philip Jägenstedt

Robert Nyman

Google は、他のブラウザベンダーや業界パートナーと協力して、ウェブデベロッパーがブラウザの互換性に関する上位 5 つの課題を解決しています。注目すべき領域は、CSS Flexbox、CSS グリッド、position: sticky、aspect-ratio、CSS 変換です。参加する方法については、貢献方法とフォローする方法をご覧ください。

背景

ウェブでの互換性は、デベロッパーにとって常に大きな課題でした。過去数年間、Google や Mozilla や Microsoft を含む他のパートナーは、ウェブデベロッパーの主な課題について調査し、状況を改善するための取り組みと優先順位付けを推進しています。このプロジェクトは Google のデベロッパー満足度（DevSAT）の取り組みに関連しており、2019 年と 2020 年の MDN DNA（デベロッパーのニーズ評価）アンケートの作成により大規模に開始され、MDN Browser Compatibility Report 2020 で詳細な調査活動が発表されました。また、State of CSS や State of JS の調査など、さまざまなチャネルで追加の調査が行われています。

2021 年の目標は、5 つの主要な重点分野においてブラウザの互換性の問題を排除し、デベロッパーがそれを信頼性の高い基盤として自信を持って構築できるようにすることです。この取り組みは #Compat 2021 と呼ばれます。

重視するものを選択する

基本的にすべてのウェブプラットフォームにはブラウザの互換性の問題がありますが、このプロジェクトでは、特に問題となるいくつかの領域に重点を置いて改善し、それらをデベロッパーにとって特に重要な問題として排除しています。

互換性プロジェクトでは、優先する領域に影響を与える複数の基準を使用します。その一部を以下に示します。

機能の使用状況。たとえば、Flexbox は全ページビューの 75% で使用され、HTTP Archive での導入が急速に進んでいます。
バグの数（Chromium、Gecko、WebKit の場合）、Chromium の場合は、バグに付けられた星の数。
アンケート結果:
- MDN DNA 調査
- MDN ブラウザ互換性レポート
- CSS の現状: 最もよく知られていて使用されている機能
web-platform-tests のテスト結果。（例: flexbox on wpt.fyi）。
最も検索されている機能を使用できるか

2021 年の 5 つの重点分野

2020 年、Chromium は 2020 年に Chromium のブラウザの互換性を改善するで概説されている重要な領域への取り組みを開始しました。2021 年には、さらに踏み込んだ取り組みを開始いたします。Google と Microsoft は、Igalia とともに、Chromium の主要な問題に対処するために連携しています。Chromium と WebKit に定期的にコントリビューターであり、組み込みデバイス向けの WebKit 公式ポートのメンテナンス担当者である Igalia は、この互換性に関する取り組みに熱心に取り組んでおり、特定された問題への対応と追跡を支援しています。

以下は、2021 年に修正が予定されている分野です。

CSS Flexbox

CSS Flexbox はウェブ上で広く使用されていますが、デベロッパーにとっては依然として大きな課題もあります。たとえば、Chromium と WebKit の両方で、auto-height Flex コンテナに問題があり、画像のサイズが適切ではありません。

チェス盤。 — 画像のサイズが正しく設定されました。
写真撮影: Alireza Mahmoudi

Igalia の flexbox Cats のブログ投稿では、さらに多くの例を挙げて、これらの問題について詳しく説明しています。

優先される理由

アンケート: MDN Browser Compatibility Report の主要問題（最も知られており、State of CSS で使用されている）
テスト: すべてのブラウザで 85% 合格
使用状況: ページビューの 75%、HTTP Archive で大きく増加

CSS グリッド

CSS グリッドは、多くの古い手法や回避策に代わる、最新のウェブレイアウトの中核となる構成要素です。導入が進むにつれ、ブラウザ間の相違が決して回避される理由にならないように、堅牢性を高める必要があります。不足している領域の 1 つは、グリッドレイアウトをアニメーション化する機能です。これは Gecko ではサポートされていますが、Chromium や WebKit ではサポートされていません。サポートされていれば、次のような効果が得られます。

チェスのアニメーションのデモ（Chen Hui Jing）

優先される理由

アンケート: MDN Browser Compatibility Report の第 2 位。よく知られていますが、State of CSS ではあまり使用されていません。
テスト: すべてのブラウザで 75% 合格
使用量: 8% と着実に増加中、HTTP Archive がわずかに増加

CSS の位置: 固定

固定配置を使用すると、コンテンツをビューポートの端に固定できます。これは通常、ビューポートの上部に常に表示されるヘッダーに使用されます。すべてのブラウザでサポートされていますが、意図したとおりに動作しないケースがよくあります。たとえば、スティッキーテーブルヘッダーは Chromium ではサポートされておらず、現在はフラグの背後でサポートされていますが、ブラウザ間で結果に一貫性がありません。

Rob Flack による固定テーブルヘッダーのデモをご覧ください。

優先される理由

アンケート: State of CSS で広く知られ、使用されているもので、MDN ブラウザ互換性レポートで複数回取り上げられています。
テスト: すべてのブラウザで 66% 合格
使用率: 8%

CSS のアスペクト比のプロパティ

新しい aspect-ratio CSS プロパティを使用すると、要素の幅と高さの比率を簡単に維持できるため、有名な padding-top ハックが不要になります。

padding-top の使用

.container {
  width: 100%;
  padding-top: 56.25%;
}

アスペクト比の使用

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

これは非常に一般的なユースケースであるため、広く使用されることが予想されており、すべての一般的なシナリオとブラウザで堅牢であることを確認する必要があります。

優先される理由

アンケート: CSS の現状では広く知られているが、まだ広く使用されていない
テスト: すべてのブラウザで 27% 合格
使用量: 3%（今後増加が見込まれる）

CSS 変換

CSS 変換は長年にわたってすべてのブラウザでサポートされており、ウェブで広く使用されています。ただし、アニメーションや 3D 変換など、ブラウザ間で動作が異なる部分がまだ多くあります。たとえば、カードフリップの効果がブラウザ間で非常に不整合になることがあります。

Chromium（左）、Gecko（中央）、WebKit（右）のカードフリップ効果バグコメントから David Baron によるデモ。

優先される理由

アンケート: State of CSS でよく知られ、使用されている
テスト: すべてのブラウザで 55% 合格
使用率: 80%

どのように貢献し、フォローするか

@ChromiumDev または公開メーリングリスト Compat 2021 をフォローし、最新情報を共有してください。バグが存在することを確認するか、発生している問題について報告してください。不足しているものがあれば、上記のチャネルにお問い合わせください。

web.dev で進行状況が定期的に更新されます。また、Compat 2021 ダッシュボードで各重点分野の進行状況を確認することもできます。

ブラウザベンダー各社が一丸となって信頼性と相互運用性を改善し、皆様が優れたウェブアプリを構築できるようになることを願っています。