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

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

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

Chrome 125 には CSS アンカー ポジショニングが含まれています。これにより、JavaScript を使用せずに、宣言型の方法で、絶対配置された要素をページ上の 1 つ以上の他の要素(アンカー)に固定できます。アンカーの配置は、アンカーがスクロール可能である場合にパフォーマンスが向上します。一般的なユースケースとしては、ツールチップなどのポップオーバーを、ポップオーバーを呼び出した要素の横に配置したり、選択メニューとそのポップオーバー オプション リストを配置したりします。

詳しくは、CSS アンカー ポジショニング API のご紹介をご覧ください。

Browser Support

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

Source

CSS ステップ値関数 - round()mod()rem()

Chrome 125 には、ステップ値関数も含まれています。つまり、これらの関数はベースラインで新しく利用可能になりました。ステップ値関数 round()mod()rem() はすべて、別の「ステップ値」に従って指定された値を変換します。

詳しくは、CSS ステップ値数学関数がベースライン 2024 に追加されましたをご覧ください。

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 118.
  • Safari: 15.4.

Source

light-dark() 関数

ベースラインの新規利用可能機能には、Safari 17.5 の CSS 色関数 light-dark() も含まれます。

light-dark() は 2 つの引数を受け入れる関数で、どちらも <color> である必要があります。使用しているカラーパターンに応じて、どちらか一方が選択されます。

  • 使用されるカラーパターンが light または不明な場合、最初の値の計算値が返されます。
  • 使用されているカラーパターンが dark の場合、2 番目の色の計算値が返されます。

詳しくは、light-dark() を使用した CSS のカラーパターン依存の色 をご覧ください。

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Screen Wake Lock API

Firefox 126 では、Screen Wake Lock API がリリースされます。この機能も、ベースラインの新規リリースの一部です。この API を使用すると、デバイスの画面が暗くなったり、ロックされたりすることを防ぐことができます。

この機能の使用方法については、Screen Wake Lock API を使用して画面を常にオンにするをご覧ください。

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

Compute Pressure API

Compute Pressure API は、システムの CPU 負荷を表す高レベルの状態を提供します。これにより、実装で適切な基盤となるハードウェア指標を使用できるため、システムが管理不能なストレスを受けていない限り、ユーザーは利用可能なすべての処理能力を活用できます。

この機能は Chrome 125 で利用できます。Intel が主導して設計と実装を行ったこの API により、ビデオ会議アプリは機能とパフォーマンスを動的にバランスさせることができます。

Compute Pressure API のドキュメントを読む。

Browser Support

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

Source

@starting-style ルール

Safari 17.5 には @starting-style ルールが含まれています。この CSS の at ルールを使用すると、エントリ アニメーションに応じて、ページ上で要素が開く前にブラウザが検索できるスタイルを適用できます。

@starting-style ルールは、スムーズな開始アニメーションと終了アニメーションのための 4 つの新しい CSS 機能で説明されている機能の 1 つです。

Browser Support

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

Source

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

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

Chrome 126 では、同一オリジンのナビゲーションのクロスドキュメント ビュー遷移が導入されています。これまでは、View Transitions API を使用するには、ウェブサイトを SPA に再設計する必要がありました。これは廃止されました。同じオリジンのナビゲーションに対して、ビュー遷移がデフォルトで有効になりました。同じオリジンの 2 つの異なるドキュメント間でビュー遷移を作成できます。

Firefox 127 には、JavaScript Set メソッド(intersection()union()difference()symmetricDifference()isSubsetOf()isSupersetOf()isDisjointFrom())が追加されています。