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

Stable 版とベータ版でリリースされた興味深い機能をいくつかご紹介します 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);
}

対応ブラウザ

  • 119
  • 119
  • 128
  • 16.4

詳しい例については、ブログ投稿をご覧ください。 CSS 相対色の構文 相対色の構文は、相互運用 2024 の重点分野の一つです。 今回のアップデートにより、安定した Firefox のスコアも向上します。

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

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

対応ブラウザ

  • 77
  • 79
  • 128
  • 17.4

Chrome 127 の更新により、Chrome で任意の数のリクエストを 要素を含めることで、attr() の使用が可能になります。 使用できます。

font-size-adjust プロパティ

Chrome 127 には、相互運用 2024 の重点分野である font-size-adjust も含まれています。 このプロパティは、フォントのフォールバックが発生する可能性がある状況で役立ちます。 代替フォントのサイズを第 1 希望のフォントに合わせることができます

対応ブラウザ

  • 127
  • 127
  • 3
  • 16.4

ソース

今回の Chrome リリースでは、font-size-adjust プロパティが ベースラインが新たに利用可能になりました。

iframes での View Transition API のサポート

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

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

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

Chrome 127 以降、スクローラーはクリック フォーカスとプログラムでフォーカス可能 できます。フォーカス可能な子がないスクローラーは、デフォルトでキーボードでフォーカス可能です。

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

@property ルール

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

対応ブラウザ

  • 85
  • 85
  • 128
  • 16.4

ソース

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

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

@property ルールが、ベースラインとして新たに利用可能になりました。詳細: @property: 次世代の CSS 変数でユニバーサル ブラウザがサポートされるようになりました。

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

サイズ変更可能 ArrayBuffer 成長可能 SharedArrayBuffer Firefox 128 でサポートされていますが サイズを割り当てることなく、バッファのサイズを 新しいバッファに格納し、そこにデータをコピーします。 これらのプロパティは、Baseline Newly available も結合します。

対応ブラウザ

  • 111
  • 111
  • 128
  • 16.4

ソース

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

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

対応ブラウザ

  • 115
  • 115
  • 63
  • 18

safe キーワード 選択した配置によってコンテンツが 表示されます。次の CodePen は、これがどのように動作するかを 中央揃えのアイテムが表示されますcenter アライメントによりデータ損失が発生する場合は、 代わりに start が使用されます。

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

ベータ版のブラウザでは、次の新機能をプレビューできます。 ブラウザの安定バージョンです。新機能をテストする絶好の機会です。 削除の措置が講じられる可能性があります。新規 ベータ版は Firefox 129、 Chrome 128。「 Safari 18 ベータ版を提供中です。 このリリースにより、プラットフォームに多くの優れた機能が追加されます。リリースを確認する 確認してください。その一部をご紹介します。

Chrome 128 に追加された CSS ruby-align プロパティと、 display: ruby、 zoom プロパティも仕様に合わせて更新されています。また、 割り当てられたコールバックを追加するための AudioContext API の更新 AudiContext.onerror: AudioContext の作成とレンダリングのエラーを報告します。

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