Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

ギャップを埋める

ウェブ向けの構築を容易にする。

Rachel Andrew Technical Writer

デベロッパーと個別に、または State of CSS などのアンケートを通じて話すと、同じことが繰り返し聞こえてきます。デベロッパーは、さまざまなブラウザで適切に動作するウェブサイトやアプリケーションを作成することや、魅力的な新機能を安全に使用できるタイミングを把握することが難しいと感じています。

Flexbox のギャップ

問題のあるプロパティの例として、gap プロパティを使用すると、グリッドアイテムまたはフレックスアイテム、またはマルチカラムコンテナ内の列の間にギャップを作成できます。column-gap は以前から multicol で使用されていましたが、このプロパティは grid-column-gap、grid-row-gap とともに grid-gap としてグリッドレイアウトに初めて登場しました。

グリッドレイアウトがブラウザに導入された直後に、このプロパティは row-gap、column-gap とともに gap に名前が変更されました。その後、フレックスレイアウトでも機能するように指定されました。名前を変更することで、同じ処理を行う複数のプロパティが存在しないようにします。

.box {
  display: flex;
  gap: 1em;
}

Firefox は 2018 年 10 月に、フレックスレイアウト用のプロパティをリリースしました。Chrome には 2020 年 7 月、Safari には 2021 年 4 月に導入されました。つまり、gap を安全に使用できるようになるまでに 2 年 6 か月のギャップがありました。実際には、ほとんどのデベロッパーは、最新バージョンよりも古いブラウザバージョンをサポートする必要があるため、さらに長く待つ必要がありました。Flex レイアウトでの gap のサポートは、機能クエリを使用して Flex レイアウトでの gap のサポートを検出できないという事実により、さらに問題が大きくなりました。gap プロパティはグリッドでサポートされているため、@supports (gap:1em) は true を返します。

もう一つの問題は、あるブラウザに新機能が搭載されると、人々がその機能について話し、デモを共有し始めることです。多くの場合、この作業は機能が安定版ブラウザに搭載されるずっと前から始まります。これはデベロッパーにとって混乱を招く可能性があり、少なくとも不満の原因になります。新しい機能が話題になっていても、サポートが不十分なために実際には使用できないことがよくあります。

サポートにギャップがあるのはなぜですか？

この記事は、特定のブラウザの動作が遅いことを指摘するものではありません。さまざまなプラットフォームの機能に目を向けると、機能ごとに異なるブラウザが主導権を握っていることがわかります。

ほとんどの機能は 1 つのブラウザでプロトタイプが作成されます。たとえば、グリッドレイアウト仕様は Microsoft によって最初に作成され、Internet Explorer 10 で初期形式で実装されました。Mozilla のエンジニアが、サブグリッドの動作を解明するために多くの作業を行ったため、この機能は Firefox に最初に導入されました。Safari は、いくつかのエキサイティングな新しいカラー機能をリードしています。

1 つのブラウザがプロトタイピングを主導することもありますが、CSS ワーキンググループのすべてのブラウザ（およびその他の組織）の代表者が CSS の機能について議論します。機能がすべてのブラウザに実装可能であること、そして、1 つのブラウザに実装できないような設計になっていないことが非常に重要です。その結果、サポートに永続的なギャップが生じ、機能の導入が進まなくなります。

ただし、機能の実装に関しては、そのブラウザで実装可能な他のすべての機能とともに優先順位を付ける必要があります。また、ブラウザを改善するために必要な他の作業が優先され、保留になることもあります。その好例が、Chromium の RenderingNG の取り組みです。これにより、サブグリッドの実装への道が開かれました。しかし、Firefox と Chromium のサブグリッドのリリースに長いギャップがあるのは、まず新しいレンダリングエンジンでグリッドレイアウトを再実装する必要があるためです。

問題

ここには 2 つの問題があります。1 つ目は相互運用性の問題です。ある機能が 1 つのブラウザに導入されてから、すべてのプラットフォームで利用できるようになるまでに長い時間がかかることがあります。

2 つ目は、メッセージングの問題です。サポートのギャップがどこにあるかを明確にするにはどうすればよいでしょうか？新機能を共有する際に、各機能のサポート状況を全員が個別に詳しく調べる必要がないようにするには、どうすればよいでしょうか。

相互運用性

ブラウザは、相互運用性の問題を解決するためにすでに連携しています。昨年、Compat 2021 は、フレックスレイアウトの gap プロパティなど、多くの機能のサポートのギャップを埋めるのに役立ちました。今年の Interop 2022 の取り組みでは 15 の機能に焦点を当てており、その一部ですでに動きが見られます。

進捗状況は Interop 2022 ダッシュボードで確認できます。

メッセージ

2 つ目の問題は、web.dev と developer.chrome.com で機能について説明する際に、私がぜひとも解決したいと考えているものです。私は、コンテンツを読んだときに機能のステータスが明確にわかるようにしたいと考えています。また、サポートの問題を解決するための実用的な方法を提供したいと考えています。

Google は、基礎コースを多数リリースしており、今後もさらに追加していく予定です。これらのコースでは、コアウェブプラットフォームテクノロジーを使用して、最新のウェブ向けに構築する方法を学習できます。注目:

Google では、このサイトのコンテンツを、安全に使用できるものに絞るよう取り組んでいます。まだ完全には実現していませんが、今後数か月の間に、実用的なものへの移行が少しずつ見られるようになるはずです。

また、Open Web Docs プロジェクトのサポートを通じて、オープンウェブドキュメントにも貢献しています。これにより、MDN には最新のブラウザ互換性データとともに、優れたドキュメントが用意されています。このデータは、web.dev で機能のサポート状況を表示するために使用されます。フレックスレイアウトでの gap の現在のサポート状況は次のとおりです。

Browser Support

ウェブに関する Chrome のビジョンや、オリジントライアルとデベロッパートライアルでテストしている内容について詳しく知りたい場合は、姉妹サイトである developer.chrome.com をご覧ください。このサイトのコンテンツは、テスト段階のものや、現時点では Chrome でのみサポートされているものもありますが、ぜひご覧いただき、フィードバックをお寄せください。

今、ウェブは本当にエキサイティングな時代を迎えています。Google は、主要な機能をより迅速に提供し、存在するギャップを明確にすることで、ウェブ開発をより楽しく、不満の少ないものにしたいと考えています。