8 月にウェブ プラットフォームを導入

2024 年 8 月に Stable 版と Beta 版のウェブブラウザに導入された興味深い機能をご紹介します。

Rachel Andrew

ブラウザの安定版リリース

2024 年 8 月、Firefox 129 と Chrome 128 が安定版になりました。この記事では、ウェブ プラットフォームに追加された新機能を紹介します。

ルビーの書式設定の更新

HTML <ruby> 要素は、特に東アジアの言語でテキストの表示を強化するための強力なツールです。この要素を使用すると、ベーステキストの上にまたは横に音声記号などの補足情報を表示できます。Chrome 128 以降、ルビ アノテーションは改行可能になり、ruby-align CSS プロパティでルビテキストのスタイルを設定できるようになりました。

詳しくは、改行可能 <ruby> と CSS ruby-align プロパティをご覧ください。

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

PointerEvent.deviceProperties: マルチペン インキング

この変更は Chrome 128 でリリースされ、画面に接触する個々のペン（ポインタ）を安全かつ確実に識別して、デジタイザーに接触する各デバイスに特定の色やペンの形状を設定できるようになります。PointerEvent インターフェースを拡張して、新しい属性 deviceProperties を追加します。これには、セッション永続でドキュメントごとに分離された一意の識別子を表す uniqueId 属性が含まれます。この属性は、ページを操作する個々のペンを確実に識別するために使用できます。

Promise.try

また Chrome 128 では、Promise.try により Promise でエラーを簡単に処理できるようになりました。関数 f を使用するパターンがあります。この関数は非同期で、Promise を返す場合もあれば、返さないこともあります。Promise のセマンティクスを使用して両方の場合のエラーを処理するには、関数を Promise でラップします。通常は new Promise(resolve => resolve(f())) で実現します。

Promise.try は、同じことをより簡単に行う方法です。これにより、同期と非同期の両方の例外フローを処理する必要なく、.catch ハンドラですべてのエラーをキャッチする Promise チェーンを開始できます。

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

エントリ エフェクトをアニメーション化する

Firefox 129 には、エントリ エフェクトのアニメーション化に使用される 2 つの CSS 機能が含まれています。これらの機能は、ベースラインの新規利用可能になりました。

@starting-style ルールは、ページにレンダリングされる前に要素の初期スタイルを定義します。これは、display: none からアニメーションで表示される要素に必要です。アニメーションの開始状態を指定する必要があります。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

エントリ エフェクトでは、値を補間できない離散プロパティのアニメーションも必要です。これは、遷移の省略形で transition-behavior: allow-discrete または allow-discrete 値を使用して実現できます。Firefox 129 でもサポートされるようになりました。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

詳しくは、ベースラインの新機能: エントリ エフェクトのアニメーション化をご覧ください。

PerformanceResourceTiming の追加

Firefox 129 では、PerformanceResourceTiming インターフェースの contentType プロパティと responseStatus プロパティが追加されました。これらは、フェッチされたリソースのコンテンツ タイプと、リソースのフェッチ時に返された HTTP レスポンス ステータス コードを示します。

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

位置情報の toJSON() メソッド

Firefox 129 には GeolocationCoordinates.toJSON() と GeolocationPosition.toJSON() もあります。

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

Firefox 129 で、WebDriver BiDi がサポートされるようになりました。つまり、Chrome または Firefox で Puppeteer を使用して自動化できます。詳しくは、Firefox、Chrome、Puppeteer で WebDriver BiDi が本番環境に対応と Firefox での Puppeteer の公式サポートの発表をご覧ください。

ベータ版ブラウザのリリース

ブラウザのベータ版では、ブラウザの次の安定版に含まれる機能のプレビューを利用できます。リリース前に、サイトに影響する可能性がある新機能や削除をテストできます。新しいベータ版は Firefox 130 と Chrome 129 です。Safari 18 ベータ版は引き続き実施中です。今回のリリースでは、プラットフォームに多くの優れた機能が追加されています。詳細については、リリースノートをご覧ください。主な機能は次のとおりです。

Firefox 130 では、<details> 要素をグループ化する <details> 要素の名前属性がサポートされています。グループ内の要素は一度に 1 つだけ開くことができます。これにより、JavaScript を使用せずに排他的アコーディオンを作成できます。

Chrome 129 では、CSS の interpolate-size プロパティと calc-size() 関数が追加されます。

CSS interpolate-size プロパティを使用すると、auto、min-content、fit-content などの CSS 固有のサイズ設定キーワードのアニメーションと遷移をページで有効にできます（これらのキーワードをアニメーション化できる場合）。

CSS calc-size() 関数は calc() に似た CSS 関数ですが、サポートされているサイズ設定キーワードを 1 つだけ操作することもできます。現在サポートされているサイズ設定キーワードは、auto、min-content、max-content、fit-content です。

Chrome 129 には Intl.DurationFormat も追加されています。これは、複数の言語 / 地域をサポートする「1 時間 40 分 30 秒」などの時間のフォーマット方法を提供するものです。