Google は、他のブラウザ ベンダーや業界パートナーと協力して、ウェブ デベロッパーが抱えるブラウザの互換性に関する上位 5 つの問題である CSS フレックスボックス、CSS グリッド、position: sticky、aspect-ratio、CSS 変換の問題の解決に取り組んでいます。
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 と呼びます。
重点を置く対象を選ぶ
基本的にウェブには ブラウザの互換性の問題がありますが 最も重大な問題の一部に焦点を絞る 大幅に改善できる領域を特定し それらを主な問題として取り除きます 説明します。
互換性プロジェクトでは、複数の基準を使用して、どの領域を いくつかあります。
- 機能の使用。たとえば Flexbox は 75% 全ページビューに占める割合と、HTTP アーカイブをご覧ください。
- バグの数 （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 の主要な問題に対処するために協力して取り組んでいます。定期的なコントリビューターである Igalia Chromium と WebKit、組み込みデバイス向けの公式 WebKit ポートの管理者 互換性に関する取り組みに非常に協力的であり、積極的に参加しており、 特定された問題への取り組みと追跡に役立ちます
2021 年に修正が予定されている領域は以下のとおりです。
CSS フレックスボックス
CSS Flexbox
広く使用されている
大きな課題に直面しています。たとえば
Chromium と
WebKit
auto-height Flex コンテナで画像のサイズが正しくない問題がありました。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">写真提供: Alireza Mahmoudi。
イガリアのフレックスボックス キャッツ ブログ投稿では、これらの問題をさらに多くの例で掘り下げています。
優先される理由
- サーベイ: 上位の問題 MDN ブラウザ互換性レポート 世界で最も知名度が高く、 CSS
- テスト: すべてのブラウザで 85% 合格
- 使用方法: 75% ページビューは、HTTP アーカイブ
CSS グリッド
[CSS グリッド]: 従来の多くの手法に代わる、最新のウェブ レイアウトの中核となる構成要素 提示します導入が進むにつれ、強固な基盤を築く必要があります。 ブラウザによる違いは、回避すべき理由にはなりません。1 つの分野は グリッドレイアウトをアニメーション化する機能は Gecko でサポートされていますが Chromium または WebKit:サポートされている場合 次のような効果が得られます。
<ph type="x-smartling-placeholder">優先される理由
- アンケート: 第 2 位 MDN ブラウザ互換性レポート よく知られているものの、あまり使用されていない CSS
- テスト: すべてのブラウザで 75% 合格
- 使用方法: 8%、着実に成長している HTTP がわずかに増加 アーカイブ
CSS の位置: 固定
固定的なポジショニング コンテンツをビューポートの端に固定できます。これは、 を使用します。サポート対象内 意図したとおりに動作しないことがよくあります。 たとえば 固定表の見出し Chromium ではサポートされていませんが、現在では フラグによってサポートされている ブラウザ間で結果に一貫性がありません。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">優先される理由
- アンケート: CSS と、 複数回 MDN ブラウザ互換性レポート
- テスト: 66% 合格 すべてのブラウザ
- 使用方法: 8%
CSS のアスペクト比のプロパティ
新しい
aspect-ratio
CSS プロパティを使用すると、CSS で要素の幅と高さの比率を簡単に維持でき、
構成することで、よく知られている
padding-top ハック:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
非常に一般的なユースケースであるため、広く使用されることが予想されます。 すべての一般的なシナリオとブラウザで 確実に動作するようにします
優先される理由
CSS 変換
CSS 変換 は長年にわたってすべてのブラウザでサポートされ、 あります。しかし、以前と変わらない部分も数多くある 特にアニメーションと 3D 変換により、ブラウザをまたいで分析できます。たとえば 反転効果は、ブラウザ間で一貫性がない場合があります。
<ph type="x-smartling-placeholder">優先される理由
コンテンツへの貢献とフォローの方法
Google が投稿する最新情報をフォローして共有する @ChromiumDev か一般公開メーリング リストを使用して、 互換 2021。バグが存在することを確認する。 報告してください。 何かございましたら、 です。
web.dev で進捗状況を定期的に更新し、 各重点分野の進捗状況については、Compat 2021 ダッシュボードをご覧ください。
<ph type="x-smartling-placeholder">
ブラウザ ベンダー各社の間でこの協調的な取り組みとして、 ウェブで優れたサービスを開発するうえで役立ちます。