相互運用 2023 年 10 月の更新

2023 年の最終四半期を迎え、Interop 2023 の重点分野については、すべてのブラウザで大幅な進展が見られました。この記事では、相互運用 2023 のこれまでのスコアと、今年の取り組みによって利用可能になった機能について説明します。

2023 年 1 月のステータス

2023 年 1 月、Google は相互運用 2023 と 26 の重点分野を発表し、すべてのエンジンがこの年度中に改善に取り組むことを発表しました。

リリース時点での試験運用版ブラウザの相互運用スコアは全体で 62 でした。

相互運用全体のスコア: 62、調査: 0、ブラウザごとのスコア - Chrome と Edge は 86、Firefox は 74、Safari Technology Preview は 86 でした。
相互運用 2023 ダッシュボード(2023 年 1 月 31 日に取得されたスクリーンショット)

2023 年 10 月時点のステータス

試験運用版ブラウザの全体的な相互運用スコアは 89 です。Stable ビューに切り替えて、すでに安定したブラウザに配信されているものを確認すると、スコアは妥当な 75 です。その裏には多くの要素があり 主要なエンジンではさまざまな機能が活用されていますそのうちのいくつかは、小規模な相互運用性に関する修正ですが、主要な機能でもあります。

相互運用全体のスコア: 89、調査: 66、ブラウザごとのスコア - Chrome と Edge は 97、Firefox は 93、Safari Technology Preview は 95 となっています。
相互運用 2023 ダッシュボード(2023 年 10 月 30 日に取得されたスクリーンショット)

コンテナクエリのサイズ設定とコンテナクエリの長さの値

2 月に、サイズのコンテナクエリの相互運用が可能になったことを祝いました。これはウェブ デベロッパーから要望の多かった機能であり、すべてのエンジンでこれを迅速に使用できるようになったことは、ウェブ プラットフォームにとって大きな成功でした。

対応ブラウザ

  • 105
  • 105
  • 110
  • 16

ソース

サイズのコンテナクエリのほかに、コンテナクエリ単位もあります。これらは vw などのビューポート ユニットと同じように使用されます。ただし、ビューポートではなくコンテナに関連する点が異なります。

対応ブラウザ

  • 105
  • 105
  • 110
  • 16

色空間と関数

5 月、色空間 Lab、LCH、Oklab、Oklch が相互運用でサポートされるようになりました。CSS の関数表記 lab()lch()oklab()oklch() により、デベロッパーはこれらの色空間を使用できます。また、機能表記の color()color-mix() も含まれていました。

対応ブラウザ

  • 111
  • 111
  • 113
  • 15

ソース

新しい色空間と関数について詳しくは、高精細 CSS カラーガイドをご覧ください。

サブグリッド

CSS グリッド レイアウトのサブグリッド機能は、grid-template-columnsgrid-template-rows の新しい値で、ネストされたグリッドが親グリッドのトラック定義を使用できるようにします。つまり、グリッド構造内にネストされたものを並べることができます。

対応ブラウザ

  • 117
  • 117
  • 71
  • 16

ソース

サブグリッドの詳細サブグリッドの実装を難しくしている複雑さについては、BlinkOn 18 の動画をご覧ください

HTML inert 属性

HTML の inert グローバル属性を使用すると、ページのセクションを不活性としてフラグできます。これにより、クリック イベントとフォーカス イベントが防止され、ユーザー補助ツリーで要素とそのコンテンツが非表示になります。これは、たとえば、視覚的に画面外にあり、スクリーン リーダーに対しても無効にする必要があるコンテンツに対して有用です。

対応ブラウザ

  • 102
  • 102
  • 112
  • 15.5

ソース

他にも

今年は、これらの主要な機能に加えて、他の多くの機能や修正がブラウザに追加されました。一年の終わりにはブラウザのリリースが予定されており、すべてのスコアが集まった時点でサマリーが投稿されます。