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

Google は、他のブラウザ ベンダーや業界パートナーと協力して、ウェブ デベロッパーが抱えるブラウザの互換性に関する上位 5 つの問題である CSS フレックスボックス、CSS グリッド、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）の取り組み、 大規模なプロジェクトから始まりました。 MDN DNA（デベロッパーのニーズ評価）アンケート 2019 年と 2020 年に発表されました。また、 2020 年ブラウザ互換性レポート 他にもさまざまなチャネルで調査が行われており、 CSS と JS の状態 アンケートに回答します。

2021 年の目標は、ブラウザの互換性の問題を 信頼できる基盤として自信を持って構築できます。この #Compat 2021 と呼びます。

重点を置く対象を選ぶ

基本的にウェブには ブラウザの互換性の問題がありますが 最も重大な問題の一部に焦点を絞る 改善できる領域を特定し、それらを主な問題として取り除きます。 説明します。

互換性プロジェクトでは、複数の基準を使用して、どの領域を いくつかあります。

2021 年の 5 つの重点分野

2020 年、Chromium は 2020 年に Chromium のブラウザの互換性を向上。 2021 年には、さらに先へ進むための活動を開始します。Google と Microsoft は、Igalia とともに、Chromium の主要な問題に対処するために協力して取り組んでいます。定期的なコントリビューターである Igalia Chromium と WebKit、組み込みデバイス向けの公式 WebKit ポートの管理者 互換性に関する取り組みに非常に協力的であり、積極的に参加しており、 特定された問題への取り組みと追跡に役立ちます

2021 年に修正が予定されている領域は以下のとおりです。

CSS フレックスボックス

CSS Flexbox 広く使用されている 大きな課題に直面しています。たとえば Chromium と WebKit auto-height Flex コンテナで画像のサイズが正しくない問題がありました。

<ph type="x-smartling-placeholder">
</ph> チェス盤の引き伸ばされた写真。 <ph type="x-smartling-placeholder">
</ph> バグのため、画像のサイズが正しくありません。
で確認できます。
<ph type="x-smartling-placeholder">
</ph> チェス盤。 <ph type="x-smartling-placeholder">
</ph> 画像が適切なサイズになりました。
写真提供: Alireza Mahmoudi。

イガリアのフレックスボックス キャッツ ブログ投稿では、これらの問題をさらに多くの例で掘り下げています。

優先される理由

CSS グリッド

[CSS グリッド]: 従来の多くの手法に代わる、最新のウェブ レイアウトの中核となる構成要素 提示します導入が進むにつれ、強固な基盤を築く必要があります。 ブラウザによる違いは、回避すべき理由にはなりません。1 つの分野は グリッドレイアウトをアニメーション化する機能は Gecko でサポートされていますが Chromium または WebKit:サポートされている場合 次のような効果が得られます。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Chen によるチェスのアニメーションデモ Hui Jing。

優先される理由

で確認できます。

CSS の位置: 固定

固定的なポジショニング コンテンツをビューポートの端に固定できます。これは、 を使用します。サポート対象内 意図したとおりに動作しないことがよくあります。 たとえば 固定表の見出し Chromium ではサポートされていませんが、現在では フラグによってサポートされている ブラウザ間で結果に一貫性がありません。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 「TablesNG」を搭載した Chromium
をご覧ください。
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> ヤモリ
をご覧ください。
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> WebKit
をご覧ください。

固定表の見出しを確認します。 デモです。

優先される理由

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

新しい aspect-ratio CSS プロパティを使用すると、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 変換により、ブラウザをまたいで分析できます。たとえば 反転効果は、ブラウザ間で一貫性がない場合があります。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Chromium（左）、Gecko（中央）、WebKit（右）のカード反転効果。 David Baron によるバグのデモ コメントをご覧ください。

優先される理由

  • サーベイ: 広く知られ、 CSS
  • テスト: すべて 55% 合格 ブラウザ
  • 使用方法: 80%

コンテンツへの貢献とフォローの方法

Google が投稿する最新情報をフォローして共有する @ChromiumDev か一般公開メーリング リストを使用して、 互換 2021。バグが存在することを確認する。 報告してください。 何かございましたら、 です。

web.dev で進捗状況を定期的に更新し、 各重点分野の進捗状況については、Compat 2021 ダッシュボードをご覧ください。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Compat 2021 ダッシュボード をご覧ください。
Compat 2021 ダッシュボード（スクリーンショットは 2021 年 11 月 16 日に取得）。

ブラウザ ベンダー各社の間で一体となって取り組み、 ウェブで優れたサービスを開発するうえで役立ちます。