ギャップを埋める

ウェブ向けに簡単に構築できるようになりました。

Rachel Andrew

デベロッパーと個別に話したり、CSS の現状などのアンケートを通じて話したりすると、同じことが繰り返し聞こえてきます。デベロッパーは、ブラウザ間でうまく動作するウェブサイトやアプリケーションを作成するのが難しいと感じています。また、エキサイティングな新機能を安全に使用できるタイミングを把握するのも難しいと感じています。

Flexbox のギャップ

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

グリッドレイアウトがブラウザに実装された直後に、このプロパティは row-gap、column-gap とともに gap に名前が変更されました。その後、フレックスレイアウトでも動作するように指定されました。名前を変更することで、同じことを行う複数のプロパティがなくなることになります。

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

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

もう 1 つの問題は、新しい機能が 1 つのブラウザに実装されると、人々がそれについて話し始め、デモを共有し始めることです。これは、機能が安定版ブラウザに実装されるずっと前から始まっていることがよくあります。これは、開発者にとって混乱を招くか、少なくともストレスのたまる状況です。新しい機能がどこでも話題になっているのに、サポートがないために実際には使用できないということが繰り返されています。

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

これは、特定のブラウザが遅いと指摘する投稿ではありません。さまざまなプラットフォームの機能を比較すると、ブラウザによって得意な機能が異なることがわかります。

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

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

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

問題点

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

2 つ目はメッセージングの問題です。サポートのギャップがどこにあるかを明確にするにはどうすればよいですか？新機能を共有する際に、サポート状況を把握するために、すべてのユーザーが各機能を詳細に調査する必要がないようにするにはどうすればよいですか？

相互運用性

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

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

メッセージ

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

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

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

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

Browser Support

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

ウェブにとって、今は本当にエキサイティングな時代です。この取り組みにより、主要な機能をより迅速に提供し、ギャップを明確にすることで、ウェブ開発がより楽しく、ストレスの少ないものになることを願っています。

写真: Cristofer Maximilian。