ウェブ向けの開発がより簡単に。
デベロッパーと話すときは、個別に、または CSS の現状などのアンケートで、同じことが繰り返し耳にします。開発者にとって、ウェブサイトやアプリケーションをブラウザ間で適切に動作させることは難しいことです。また、魅力的な新機能を安全に使用できるかどうかの判断も困難です。
Flexbox のギャップ
問題のあるプロパティの例として、gap プロパティを使用すると、grid アイテム、flex アイテム、マルチ列コンテナ内の列の間にギャップを作ることができます。長い間、column-gap をマルチコラムで指定していましたが、このプロパティは最初は grid-gap として、grid-column-gap と grid-row-gap とともにグリッド レイアウトで表示されていました。
グリッド レイアウトがブラウザに導入された直後に、プロパティの名前が row-gap と column-gap とともに gap に変更されました。その後、Flex レイアウトでも動作するように指定しました。名前の変更は、複数のプロパティで同じ処理を行う必要がなくなることを意味します。
.box {
display: flex;
gap: 1em;
}
Firefox は、2018 年 10 月にフレキシブル レイアウト用のプロパティをリリースしました。2020 年 7 月まで Chrome に表示されず、2021 年 4 月には Safari に表示された。つまり、gap を安全に使用できるようになるまでに 2 年 6 か月のギャップがありました。実際には、最新バージョンより古いバージョンのブラウザをサポートする必要があることから、ほとんどのデベロッパーにとって待ち時間はかなり長くなっていました。Flex レイアウトでの gap のサポートは、機能クエリを使用して Flex レイアウトのギャップ サポートを検出できないため、より問題がありました。gap プロパティはグリッドでサポートされているため、@supports (gap:1em) は true を返します。
もう一つの問題は、あるブラウザに新しい機能が登場すると、人々がその機能について話題にし、デモを共有するようになることです。多くの場合、こうした動作は、安定版のブラウザに機能が実装されるずっと前から始まります。この状況はデベロッパーにとってわかりにくく、少なくとも不満を抱かせることになりかねません。さまざまな新機能が繰り返し話題になっていますが、サポートが不十分なために実際に使用できないことに気づきます。
サポートに不足があるのはなぜですか？
これは、遅いと判断してブラウザを指さす投稿ではありません。さまざまなプラットフォームの機能を見ると、ブラウザがそれぞれ異なっていることがわかります。
ほとんどの機能は 1 つのブラウザでプロトタイピングされます。たとえば、グリッド レイアウトの仕様は最初に Microsoft によって作成され、Internet Explorer 10 の初期形式で実装されました。Mozilla のエンジニアが、サブグリッドの動作を解明するために多くの作業を行ったため、この機能は最初に Firefox に搭載されました。Safari が画期的な新しい色機能でリードしています。
プロトタイピングでは 1 つのブラウザが主導するかもしれませんが、CSS ワーキング グループのすべてのブラウザ（およびその他の組織）の代表者が CSS の機能について議論します。どのブラウザでも機能を実装できることと、1 つのブラウザに実装できないような設計ではないことが非常に重要です。その結果、サポートに恒久的なギャップが生じ、この機能が採用されなくなる可能性があります。
ただし、機能を実装する場合は、そのブラウザで可能な他のすべての機能よりも優先する必要があります。また、ブラウザを改良するために実施すべき他の作業の背後に隠れているものがあることもあります。Chromium の RenderingNG 処理はその好例です。これにより、サブグリッドの実装への道が開かれました。ただし、Firefox と Chromium の出荷のサブグリッドとの間には長いギャップがあります。これは、まず新しいレンダリング エンジンでグリッド レイアウトを再実装する必要があるためです。
問題点
ここで 2 つの問題があります。1 つ目は相互運用性の問題です。ある機能が特定のブラウザに表示されてから、どこでも利用できるようになるまでには長い時間がかかるという事実です。
2 つ目はメッセージに関する問題です。サポートのギャップはどこにあるのかをはっきりさせるにはどうすればよいでしょうか。新機能がどれほどサポートされているかを全員が注意深く調べなくてもいいように、新機能を共有するにはどうすればよいか。
相互運用性
ブラウザはすでに相互運用性の問題の解決に連携しています。昨年の Compat 2021 は、Flex レイアウトの gap プロパティなど、多くの機能におけるサポートのギャップを埋めるのに役立ちました。今年の Interop 2022 の取り組みでは 15 の機能に重点を置き、そのうちのいくつかはすでに動きが出ています。
相互運用 2022 ダッシュボードで進捗状況を確認できます。
メッセージ
web.dev や developer.chrome.com の機能について説明する際、2 つ目の問題は特に力を入れています。コンテンツを読んで機能の状態を明確に示し、サポートの問題に対処する実用的な方法を提供してください。
多数の基礎コースがリリースされており、今後も追加される予定です。これらのコースでは、ウェブ プラットフォームのコア テクノロジーを使用して、最新のウェブ向けの開発方法を学ぶことができます。注目:
このサイトでは、ユーザーが安全に使用できるものに重点を置いています。まだ完全には達成できていませんが、今後数か月の間に、実践的なものに若干の移行が起こるはずです。
また、Open Web Docs プロジェクトへの支援を通じてオープンウェブ ドキュメントにも貢献しています。これにより、MDN に関するドキュメントと、最新のブラウザの互換性データを確実に提供できます。次に、このデータを web.dev で使用して、機能のサポートを示します。フレキシブル レイアウトでの gap の現在のサポートは次のとおりです。
対応ブラウザ
- 84
- 84
- 63
- 14.1
Chrome のウェブに関するビジョンや、オリジンやデベロッパー向けのトライアルで試験運用中の機能について詳しくは、姉妹サイト developer.chrome.com をご覧ください。このコンテンツは試験運用版である場合や、現時点では Chrome でのみサポートされている場合がありますが、ぜひお試しいただき、フィードバックをお寄せください。
今はウェブにとって本当にエキサイティングな時期です。主要な機能をいち早くお届けするとともに、問題点を明確にして、ウェブ開発をより楽しく、ストレスを軽減できるようお手伝いできれば幸いです。
写真提供: Cristofer Maximilian。