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

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

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

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

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

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 18.

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

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

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

Browser Support

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

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

font-size-adjust プロパティ

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

Browser Support

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

Source

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

iframe での View Transition API のサポート

Chrome 127 以降では、メインフレームと同一オリジンの iframe 内で、同一ドキュメントのビューの同時遷移が 127 回可能になります。

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

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

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

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

@property ルール

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

Browser Support

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

Source

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

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

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

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

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

Browser Support

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

Source

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

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

Browser Support

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

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

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

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

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

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