7 月に新たに導入されるウェブ プラットフォーム

2024 年 7 月に安定版とベータ版のウェブブラウザに導入された興味深い機能の一部をご紹介します。

Rachel Andrew

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

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

CSS の相対色の構文

Firefox 128 には、CSS 相対色構文が含まれています。これにより、元の色を基準とした色を作成できます。次の CSS は、hsl() を使用して色 indigo の彩度を半分にします。

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

対応ブラウザ

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 16.4。

その他の例については、ブログ投稿の CSS 相対色構文をご覧ください。相対色構文は Interop 2024 の重点分野の 1 つであるため、この更新により、安定版 Firefox のスコアが向上します。

content プロパティの代替テキスト

Firefox 128 では、画像を含む CSS content プロパティの代替テキストがサポートされています。代替テキストはユーザー補助ツリーに公開されます。つまり、content の代替テキストがすべてのブラウザでサポートされるようになりました。

対応ブラウザ

  • Chrome: 77。
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4。

Chrome 127 の更新により、Chrome は単一の文字列ではなく任意の数の要素を受け入れるようになり、attr() 関数などの使用が可能になりました。

font-size-adjust プロパティ

Chrome 127 には、相互運用 2024 の重点分野である font-size-adjust も含まれています。このプロパティは、フォント フォールバックが発生する可能性がある場合に便利です。フォールバック フォントのサイズを第 1 の選択フォントと一致させることができます。

対応ブラウザ

  • Chrome: 127。
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4。

ソース

この Chrome リリースにより、font-size-adjust プロパティは新規に利用可能になったベースラインの一部になります。

iframe での View Transition API のサポート

Chrome 127 以降では、メインフレームと同一オリジンの iframe 内で、同一ドキュメントのビューの同時遷移が 1 つ使用できるようになります。

以前は、同じオリジンの iframe で document.startViewTransition を使用してビュー遷移を実行しても、メインフレームが同時に遷移を実行している場合は機能しませんでした。iframe の遷移は自動的にスキップされます。これで、両方の遷移が実行されます。

キーボードでフォーカス可能なスクロール コンテナ

Chrome 127 以降、スクロールバーはデフォルトでクリック フォーカス可能、プログラマティック フォーカス可能になります。フォーカス可能な子のないスクローラーはデフォルトでキーボード フォーカス可能になります。

この変更について詳しくは、キーボードのフォーカス可能なスクローラーの投稿をご覧ください。

@property ルール

Firefox 128 では、@property ルールと関連する JavaScript API がサポートされています。つまり、構文、継承、初期値を定義する CSS カスタム プロパティを作成できます。

対応ブラウザ

  • Chrome: 85。
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4。

ソース

次の例では、カスタム プロパティが <color> 値のみを受け入れ、継承せず、hotpink の初期値を持つように定義されています。

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

@property ルールは、ベースラインの新規利用可能の一部になりました。詳しくは、@property: 次世代の CSS 変数をすべてのブラウザでサポートをご覧ください。

サイズ変更可能な ArrayBuffer と拡張可能な SharedArrayBuffer

Firefox 128 では、サイズ変更可能な ArrayBuffer と拡張可能な SharedArrayBuffer がサポートされるようになりました。これにより、新しいバッファを割り当ててそこにデータをコピーしなくても、バッファのサイズを変更できるようになりました。これらのプロパティは、ベースラインの新規公開にも参加します。

対応ブラウザ

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128。
  • Safari: 16.4。

ソース

Flexbox プロパティの safe キーワード

Safari 17.6 は主に既存の機能に対する修正のリリースですが、Flexbox の配置プロパティ用の safe キーワードも含まれています。これにより、safe キーワードをブラウザ間で相互運用できるようになります。

対応ブラウザ

  • Chrome: 115.
  • Edge: 115。
  • Firefox: 63.
  • Safari: 17.6。

safe キーワードを使用すると、選択した配置によってコンテンツが表示領域の外部に表示されるのを防ぐことができます。次の CodePen は、中央揃えのアイテムでどのように機能するかを示しています。center の配置でデータが失われる場合は、代わりに start が使用されます。

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

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

Chrome 128 には、CSS の ruby-align プロパティが追加され、display: ruby を持つ要素内での改行が可能になるよう変更されています。また、zoom プロパティも仕様に合わせて更新されています。AudioContext API が更新され、AudioContext の作成エラーとレンダリング エラーを報告する AudiContext.onerror に割り当てられたコールバックが追加されました。

Firefox 129 には、@starting-style ルールと transition-behavior プロパティが含まれています。これらのプロパティは、Firefox 129 が安定版にリリースされると、新規に利用可能になったベースラインの一部になります。