2024 年の相互運用に関する年半ばの更新

Rachel Andrew

下半期に入りますので、 今年、Interop 2024 によりウェブの相互運用性が改善されました。

最初

年の初め Chrome の試験運用版のブラウザ サポート スコアは 83 でした。

<ph type="x-smartling-placeholder">
</ph> Scores-Interop: 65、Investigations: 0、Chrome Canary: 83、Edge Dev: 82、Firefox Nightly: 80、Safari Technology Preview: 79 が表示されているダッシュボード。
2024 年 2 月の相互運用ダッシュボード（2024 年 2 月）
で確認できます。 <ph type="x-smartling-placeholder">
</ph> スコアのダッシュボード - 相互運用: 75、調査: 5、Chrome Canary: 90、エッジ開発: 89、Firefox Nightly: 87、Safari Technology Preview: 88。
2024 年 6 月末の 2024 年の相互運用ダッシュボード

現在のスコアは 90 で、2020 年時点で安定したブラウザのスコアは 85 です。 Chrome 126 がリリースされます。試験運用版の相互運用スコアが全体的に向上しています 10 ポイントを獲得し、 表示されます。

ポップオーバー

ポップオーバーは、2024 年 4 月に新たに利用可能になったベースラインの一部になりました。現在のポップオーバー: 構築する必要がある UI 機能が多数あります。たとえば、 メニュー、ツールチップ、選択するためのオーバーレイ、教育 UI などは、 クリックします。ポップオーバーまでは、こうした対象物を作成する際は、 できます。複数の要素が同時に開かれていないことを確認するコード、または有効にするコード ユーザーが要素の外をクリックしたときは、ライトが閉じます。その他の情報 UI 要素が他の要素の上に重なるようにするため、z-index で苦労しました。 説明します。

これらのすべての機能に加えて、 Popover API 開発時間の節約、 より高性能で利用しやすいインターフェースを 作成できます対象 次のコード例では、軽量の「閉じる」機能を持つポップオーバーが作成され、 他のポップオーバーを開いたときに自動的に閉じます。

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

対応ブラウザ

  • Chrome: 114。 <ph type="x-smartling-placeholder">
  • Edge: 114。 <ph type="x-smartling-placeholder">
  • Firefox: 125。 <ph type="x-smartling-placeholder">
  • Safari: 17。 <ph type="x-smartling-placeholder">

ソース

詳しくは、Popover API がベースラインに導入されるをご覧ください。多数 多くのアプリケーションはすでにポップオーバーのメリットを実感しています。 Tokopedia は、React コードの量を大幅に削減し この機能を利用して、サポートされていないブラウザにはポリフィルを使用します。

@property を使用した高度なカスタム プロパティ

CSS ルール @property を使用すると、高度なカスタム プロパティを作成し、 標準のカスタム プロパティで使用可能な名前や値よりも詳細な情報が得られます。 許可する構文を設定して、このプロパティが保持するデータのタイプを定義します。 色、数値、または長さを指定できます。次に、プロパティに値を割り当てるかどうかを 継承されます。

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

現在、@property ルールによって Firefox の試験運用版スコアが改善されています。 Firefox 128 が今月中に出荷され、安定したスコアが上昇します。また、 ベースラインが新たに利用可能になりました。

対応ブラウザ

  • Chrome: 85。 <ph type="x-smartling-placeholder">
  • Edge: 85。 <ph type="x-smartling-placeholder">
  • Firefox: 128。 <ph type="x-smartling-placeholder">
  • Safari: 16.4。 <ph type="x-smartling-placeholder">

ソース

詳しくは、@property: CSS 変数の追加をご覧ください。

font-size-adjust プロパティ

CSS font-size-adjust プロパティを使用すると、小文字のサイズを変更できます 1 文字あたり大文字に変換したためですこれは 代替のフォントがなくなった後も 特に小さなフォントサイズでは 判読しやすくなります

font-size-adjust プロパティは現在、テストスコアに含まれています リリースされると Stable のスコアが 今月の Chrome 127。これは、Baseline の新規利用可能にも加わります。

対応ブラウザ

  • Chrome: 127。 <ph type="x-smartling-placeholder">
  • Edge: 127。 <ph type="x-smartling-placeholder">
  • Firefox: 3. <ph type="x-smartling-placeholder">
  • Safari: 16.4。 <ph type="x-smartling-placeholder">

ソース

text-wrap: balance

text-wrap: balance を使用すると、ブラウザは最適なバランスを見つけるよう指示できます。 行を折り返します。特に見出しに便利です。 たとえば、見出しを 2 行目の 1 つの単語にまとめます。

この問題は最近 Safari でもサポートされるようになり、他のブラウザでは現在解決中です この機能がすべてのブラウザで適切に動作することを確認できます。

対応ブラウザ

  • Chrome: 114。 <ph type="x-smartling-placeholder">
  • Edge: 114。 <ph type="x-smartling-placeholder">
  • Firefox: 121。 <ph type="x-smartling-placeholder">
  • Safari: 17.5。 <ph type="x-smartling-placeholder">

ソース

これらの主要機能の相互運用が可能になっただけでなく 改善が行われています。合格したテストはそれぞれ、 相互運用性の問題を軽減できます。2022 年と 2020 年に 年末までに 100% のスコアを達成できます