2024 年 8 月に Stable 版と Beta 版のウェブブラウザに導入された興味深い機能をご紹介します。
ブラウザの安定版リリース
2024 年 8 月、Firefox 129 と Chrome 128 が安定版になりました。この記事では、ウェブ プラットフォームに追加された新機能を紹介します。
ルビーの書式設定の更新
HTML <ruby>
要素は、特に東アジアの言語でテキストの表示を強化するための強力なツールです。この要素を使用すると、ベーステキストの上にまたは横に音声記号などの補足情報を表示できます。Chrome 128 以降、ルビ アノテーションは改行可能になり、ruby-align
CSS プロパティでルビテキストのスタイルを設定できるようになりました。
詳しくは、改行可能 <ruby>
と CSS ruby-align
プロパティをご覧ください。
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 チェーンを開始できます。
エントリ エフェクトをアニメーション化する
Firefox 129 には、エントリ エフェクトのアニメーション化に使用される 2 つの CSS 機能が含まれています。これらの機能は、ベースラインの新規利用可能になりました。
@starting-style
ルールは、ページにレンダリングされる前に要素の初期スタイルを定義します。これは、display: none からアニメーションで表示される要素に必要です。アニメーションの開始状態を指定する必要があります。
エントリ エフェクトでは、値を補間できない離散プロパティのアニメーションも必要です。これは、遷移の省略形で transition-behavior: allow-discrete
または allow-discrete
値を使用して実現できます。Firefox 129 でもサポートされるようになりました。
詳しくは、ベースラインの新機能: エントリ エフェクトのアニメーション化をご覧ください。
PerformanceResourceTiming
の追加
Firefox 129 では、PerformanceResourceTiming
インターフェースの contentType
プロパティと responseStatus
プロパティが追加されました。これらは、フェッチされたリソースのコンテンツ タイプと、リソースのフェッチ時に返された HTTP レスポンス ステータス コードを示します。
contentType
responseStatus
位置情報の toJSON()
メソッド
Firefox 129 には GeolocationCoordinates.toJSON()
と GeolocationPosition.toJSON()
もあります。
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 秒」などの時間のフォーマット方法を提供するものです。