昨年末に Interop 2023 は幕を閉じました。ブラウザ ベンダーや他社の取り組みは、ウェブの相互運用性を高め、ブラウザ間の差を小さくしてユーザーの負担を軽減することを目的としています。最終結果と Chrome チームの お気に入り機能の一部を紹介します
最終スコア
このように緑色が増加しているのは素晴らしいことです。これを 2023 年初頭のスコアと比較すると、Google は長い道のりを歩んできました。どのブラウザでも、スコアは大幅に上昇しています。
注目のポイント
2023 年の重点分野の一覧については、相互運用 2023 ダッシュボードをご覧ください。:has()、コンテナクエリ、inert 属性などの重点分野は、機能全体をカバーしています。Flexbox などでは、既存のクロスブラウザ機能の微妙なテストの失敗に対処しています。
:has()
「最後は CSS の親セレクタです。これはほぼ初日からリクエストされていましたが、すべてのブラウザで最終的にこの機能を利用できるのは素晴らしいことです。つまり、デベロッパーはこのセレクタをエミュレートするために JavaScript の実行を減らせることになります。」- Chrome デベロッパー リレーションズ エンジニア Thomas Steiner
関数型疑似クラス :has() は、デベロッパーから重要なリクエストがプラットフォームにもたらされたため、大きな反響を呼んでいます。親セレクタを使用すると、内部にある要素に基づいて要素を選択できます。ただし、これ以外にもさまざまな用途があります。CSS でラップで説明したように、親要素以上の要素を選択できるほか、横方向の選択も可能です。
:has() のデモ: ホルダーChrome チームのデベロッパー リレーションズ エンジニアである Una Kravets は次のように述べています。
":has() セレクタは、新しく利用可能になった CSS の最も柔軟で強力な機能です。これを使用すると、プレゼンス、状態、または子要素の数に基づいて、任意の親のスタイルを設定できます。さらに、他のコンビネータと組み合わせて兄弟要素のスタイルを設定し、UI の新しいレベルのスタイル制御を実現できます。これは非常に柔軟な機能です。:has() の機能を利用する際に、追加のスクリプトに依存する必要性をなくす優れたデモを、すでに数多く見てきました。」
Chrome のソフトウェア エンジニアである Philip Jägenstedt が思い出したように、2023 年の State of CSS アンケートで尋ねられたように、:has() はサポート不足のためデベロッパーが苦労した主要な機能でした。こうした機能を利用できるのは Google だけではありません。
Una と Adam Argyle が The CSS Podcast で has() について話しています。また、:has() については、ウェブ コミュニティの投稿をご覧ください。
コンテナクエリ
2023 年は、かつては不可能と考えられていたことにとって素晴らしい年となりました。ウェブ プラットフォームでは、:has() に加えて、コンテナクエリがブラウザ間でもサポートされるようになりました。レスポンシブ デザインのコンセプトが導入されてからわずか 1 年後の 2011 年から、コンテナ（または要素）クエリが求められています。このたび、すべての主要なブラウザ エンジンで利用可能になりました。
Una と Adam は CSS Podcast でコンテナクエリについて説明し、「Designing in the Browser」のエピソードで Una が紹介しました。このコミュニティではヒントやアイデアも たくさん共有されています
サブグリッド
Interop 2023 で私が気に入っているのは、Subgrid です。親要素でグリッドを定義すると、その親で定義されたトラックサイズを、そのメイングリッド内にネストされたグリッドで使用できます。Microsoft Edge のウェブ プラットフォーム エンジニアの協力により、2023 年中にすべての主要なブラウザ エンジンでサブグリッドが使用できるようになりました。Chrome のスコアが上昇し、この優れた機能をすべてのユーザーに提供できるようになりました。
Chrome デベロッパーリレーションズエンジニアの Adriana Jara から 優れた UI の作成が grid とサブグリッドによって
「私はビジュアル、レイアウト、見た目の一貫性、画面への適応が苦手です。しかし、グリッドとサブグリッドを使用すれば、さまざまな画面サイズに対応し、コンテンツに自動的に適応するデザインを作成できます。専門知識がなくてもユーザーに適切なエクスペリエンスを提供できるウェブサイトを作成するという基本的なニーズに対応できるため、私のお気に入りです。」
12 Days of Web の記事で、サブグリッドのユースケースをいくつか紹介しました。この投稿の他の機能と同様に、CSS ポッドキャストのエピソードをすべて聴くことができます。ウェブ上にはさまざまなリソースがあります。
色空間と関数
Chrome CSS デベロッパーである Adam Argyle が、色空間と関数がお気に入りの機能であると話していたのは当然のことです。
「さようなら、気まずい HSL チャンネル値変数計算。ちょうど時間のカラー バリエーションの 1 行。新しい色空間と機能は、カラー ワークフローの問題を解決するだけでなく、より高度で信頼性の高い鮮やかな色とグラデーションを利用します。いくつかの機能を解放することで、生活がより便利になります。相互運用性の確保にまつわるシーズニングを加えると、色とりどりの美味しさが味わえます。」
Adam は、High Definition CSS Color Guide や gradient.style などの新しい機能を理解するための素晴らしいコンテンツを作成し、CSS Podcast の色関数について説明しています。
これらの機能を、すべての主要なブラウザ エンジンで利用できることはすばらしいことです。詳しくは、こちらの記事をご覧ください。
2024 年の相互運用を楽しみにしています
機能の相互運用が可能になると、新たに利用可能になったベースラインの一部になります。Interop 2023 に関わったすべての方の努力のおかげで、2023 年中には数多くの新機能がこのグループに加わりました。2024 年の重点分野を間もなく発表する日がやってきましたが、今年もウェブ プラットフォームがいかに向上するかを楽しみにしています。