2024 年 5 月に安定版およびベータ版のウェブブラウザでリリースされた興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2024 年 5 月に、Firefox 126、Safari 17.5、Chrome 125 が安定版になりました。この投稿では、ウェブ プラットフォームに追加された新機能を紹介します。
CSS アンカーの配置
Chrome 125 では、CSS のアンカー配置機能が追加されました。これにより、JavaScript を使用せずに、絶対位置にある要素をページ上の 1 つ以上の他の要素（アンカー）に宣言型の方法でテザリングできます。アンカーがスクロール可能な場合、アンカーの位置は効率的に機能します。一般的なユースケースとして、ポップオーバーを呼び出した要素の横にツールチップ（ツールチップなど）を配置することや、選択メニューとそのポップオーバー オプション リストを配置することが挙げられます。
詳しくは、CSS Anchor Positioning API の概要をご覧ください。
CSS の段階的な値関数 - round()、mod()、rem()
Chrome 125 には段階的な値関数も含まれています。これは、これらの関数がベースラインで新たに利用可能になったことを意味します。ステップ値関数 round()、mod()、rem() はすべて、指定された値を別の「ステップ値」に従って変換します。
詳細については、CSS の段階的値数学関数がベースライン 2024 で利用可能にをご覧ください。
light-dark() 関数
また、Safari 17.5 の CSS カラー関数 light-dark() も Baseline Newly Available に結合されています。
light-dark() は、2 つの引数を受け入れる関数で、どちらも <color> にする必要があります。使用されているカラーパターンに応じて、どちらか一方が選択されます。
- 使用されたカラーパターンが
lightまたは不明な場合は、最初の値の計算値が返されます。 - 使用されたカラーパターンが
darkの場合、2 番目の色の計算値が返されます。
詳しくは、light-dark() による CSS のカラーパターン依存の色 をご覧ください。
Screen Wake Lock API
Firefox 126 では、Screen Wake Lock API がリリースされます。この API は、現在 Baseline Newly Available の一部となっています。この API は、デバイスの画面が暗くなったりロックされたりすることを防止する手段を提供します。
この機能の使用方法については、Screen Wake Lock API で画面をロックしないをご覧ください。
Compute Pressure API
Compute Pressure API は、システムの CPU 負荷を表すハイレベルの状態を提供します。これにより、実装で基盤となる適切なハードウェア指標を使用できるため、システムに管理不可能なストレスがかかっていない限り、ユーザーは利用可能なすべての処理能力を活用できます。
この機能は Chrome 125 です。この API の設計と実装は Intel が主導し、ビデオ会議アプリで機能とパフォーマンスのバランスを動的に調整できるようにします。
Compute Pressure API のドキュメントを確認する。
@starting-style ルール
Safari 17.5 には @starting-style ルールが含まれています。この CSS の @ ルールを使用すると、ページ上で要素が開く前にブラウザが参照できるスタイルを、エントリ アニメーションのために必要なものとして適用できます。
@starting-style ルールは、スムーズな開始と終了のアニメーションのための 4 つの新しい CSS 機能で取り上げられている機能の 1 つです。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、ブラウザの次の安定版でリリースされる機能をプレビューできます。この機会に、一般公開に先駆けて、サイトに影響する可能性がある新機能や削除についてテストすることをおすすめします。新しいベータ版は Firefox 127 と Chrome 126 です。これらのリリースは、プラットフォームに多くの優れた機能をもたらします。詳しくはリリースノートをご覧ください以下に、その一部をご紹介します。
Chrome 126 では、同一オリジンのナビゲーションに対して、ドキュメント間のビュー遷移が含まれます。これまで、View Transitions API を使用するには、ウェブサイトを SPA に再構築する必要がありました。これは廃止されました。同一オリジン ナビゲーションで、ビュー遷移がデフォルトで有効になりました。同じオリジンの 2 つの異なるドキュメント間にビュー遷移を作成できます。
Firefox 127 には、追加の JavaScript Set メソッド（intersection()、union()、difference()、symmetricDifference()、isSubsetOf()、isSupersetOf()、isDisjointFrom()）が含まれています。