このページは Cloud Translation API によって翻訳されました。

ギャップを埋める

ウェブ向けの開発が容易になります。

Rachel Andrew

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

Flexbox の隙間

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

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

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

Firefox では、2018 年 10 月に flex レイアウトのプロパティがリリースされました。2020 年 7 月までは Chrome に表示されず、2021 年 4 月に Safari に表示されました。つまり、gap を安全に使用できるようになるまでに 2 年 6 か月もの期間が必要でした。実際、ほとんどのデベロッパーは、最新バージョンより古いブラウザバージョンをサポートする必要があったため、さらに長い時間を待つ必要がありました。特徴クエリを使用して、フレックスレイアウトでのギャップサポートを検出できないため、フレックスレイアウトでの 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 では、flex レイアウトの gap プロパティなど、多くの機能のサポートが改善されました。今年の Interop 2022 の取り組みでは 15 個の機能に焦点を当てていますが、その一部についてはすでに動きがあります。

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

メッセージ

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

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

私たちは、このサイトのコンテンツを安全に使用できるものに絞って取り組んでおります。まだ完全ではありませんが、今後数か月のうちに実践的な手法に移行し始めるはずです。

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

対応ブラウザ

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

ウェブは現在、非常にエキサイティングな時代を迎えています。重要な機能をより迅速に提供し、存在するギャップを明確にして、ウェブ開発をより楽しく、ストレスの少ないものにしたいと考えています。

写真: Cristofer Maximilian