ギャップを埋める

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

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

Flexbox の隙間

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

グリッド レイアウトがブラウザに導入された直後、このプロパティは row-gapcolumn-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 により、フレックス レイアウトの gap プロパティなど、多くの機能のサポートが改善されました。今年の Interop 2022 では 15 個の機能に重点を置いており、そのうちのいくつかはすでに動き始めています。

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

メッセージ

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

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

Google は、このサイトのコンテンツを、安全に使用できるものに絞り込むよう取り組んでいます。まだ完全には実現していませんが、今後数か月以内に実用的な方向に少しずつシフトしていく予定です。

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

対応ブラウザ

  • Chrome: 84。
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1。

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

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

写真: Cristofer Maximilian