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

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

2023 年 5 月に、Firefox 113Chrome 113Chrome 114Safari 16.5 が安定版になりました。ウェブ プラットフォームにどのような影響があるか見てみましょう。

Chrome 113 では、ウェブ向け WebGL および WebGL 2 グラフィック API の後継となる WebGPU を搭載しています。GPU コンピューティング、GPU ハードウェアへのアクセスのオーバーヘッドの低減、単一のグラフィック デバイスから複数のキャンバスへのレンダリング、より優れた予測可能なパフォーマンスなどの最新機能を提供します。

対応ブラウザ

  • Chrome: 113。
  • Edge: 113.
  • Firefox Technology Preview: サポートされています。
  • Safari Technology Preview: サポートされています。

ソース

ファーストパーティ セット

ファーストパーティ セット(FPS)は、プライバシー サンドボックスの一部です。組織がサイト間の関係を宣言して、ブラウザがセット内のサイトに対して制限付きのサードパーティ Cookie のアクセスを許可するタイミングを決定できるようにする方法です。FPS は Chrome 113 で段階的な公開を開始しました。

CSS メディア特性など

CSS の場合、Chrome 113 には overflow-inline メディア特性と overflow-block メディア特性が含まれています。

対応ブラウザ

  • Chrome: 113。
  • Edge: 113。
  • Firefox: 66。
  • Safari: 17。

ソース

update メディア機能。

対応ブラウザ

  • Chrome: 113。
  • Edge: 113。
  • Firefox: 102.
  • Safari: 17。

ソース

イージング関数 linear() も含まれています。詳しくは、linear() イージング関数を使用して CSS で複雑なアニメーション カーブを作成するをご覧ください。

対応ブラウザ

  • Chrome: 113。
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2。

CSS カラーレベル 4 の機能

Firefox 113 には、color()lab()lch()oklab()oklch()color-mix() の機能表記と、forced-color-adjust プロパティが追加されました。つまり、新しいカラースペースと関数が、3 つの主要なエンジンすべてでサポートされるようになりました。これらの色空間と関数の詳細については、高解像度 CSS の色ガイドをご覧ください。

対応ブラウザ

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2。

ソース

:nth-child() の選択をより細かく制御

Firefox 113 では、セレクタリストを :nth-child()nth-last-child() に渡す機能も追加されています。詳しくは、of S 構文を使用して :nth-child() の選択をより細かく制御するの投稿で例をご覧ください。

対応ブラウザ

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

Compressions Streams API

Firefox 113 に追加されたため、3 つの主要なエンジンすべてでサポートされるようになった Compressions Streams API を使用すると、ストリームの圧縮と解凍が可能になります。つまり、JavaScript アプリケーションで圧縮ライブラリをバンドルする必要がなくなりました。

対応ブラウザ

  • Chrome: 80。
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4。

ソース

CSS のネスト

Safari 16.5 では、ほとんどの問題が解決されましたが、CSS ネストのサポートも追加されました。新しいネスト セレクタ > を使用して、関連するスタイルルールをネストできます。この方法は、プリプロセッサを使用したことがあるデベロッパーには馴染みのあるものです。

.nesting {
 
color: hotpink;

 
> .is {
   
color: rebeccapurple;

   
> .awesome {
     
color: deeppink;
   
}
 
}
}

対応ブラウザ

  • Chrome: 120。
  • エッジ: 120。
  • Firefox: 117.
  • Safari: 17.2。

ソース

text-wrap: balance によるヘッドラインのバランス調整

Chrome 114 以降では text-wrap: balance を使用できます。これにより、見出しのバランスをとることができ、最後の行に単一の単語が残る問題を回避し、より見やすく読みやすい結果を得ることができます。詳しくは、CSS text-wrap: balance をご覧ください。

対応ブラウザ

  • Chrome: 114。
  • Edge: 114.
  • Firefox: 121。
  • Safari: 17.4。

ソース

CHIPS: Cookie の独立パーティション分割状態

サードパーティ Cookie の段階的廃止の一環として、CHIPS では、新しい Cookie 属性 Partitioned を使用して、トップレベル サイトごとにパーティショニングされたサードパーティ Cookie をオプトインできます。CHIPS は Chrome 114 で利用できます。

Popover API

また、Chrome 114 では Popover API が追加され、他のすべてのウェブアプリ UI の上に表示される一時的なユーザー インターフェース(UI)要素を簡単に作成できるようになりました。

これには、アクション メニュー、フォーム要素の候補、コンテンツ選択ツール、教育 UI などのユーザー インタラクティブ要素が含まれます。

新しいポップオーバー属性を使用すると、任意の要素を最上位レイヤに自動的に表示できます。つまり、開発者は要素の配置、要素の重ね合わせ、フォーカス、キーボード操作について心配する必要がなくなります。

詳しくは、ポップオーバー API の概要をご覧ください。

対応ブラウザ

  • Chrome: 114。
  • Edge: 114.
  • Firefox: 120。
  • Safari: 17。

ソース

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

ブラウザのベータ版では、ブラウザの次期安定版に搭載される機能のプレビューを確認できます。リリース前に、サイトに影響する可能性がある新機能や削除をテストできます。新しいベータ版は、Firefox 114Chrome 115Safari 16.6 です。このリリースにより、プラットフォームに数多くの優れた機能が追加されます。詳細についてはリリースノートをご覧ください。主な内容の一部だけをご紹介します。

Chrome 115 では、CSS display プロパティに複数の値が含まれています。つまり、display: flexdisplay: block flex に、display: blockdisplay: block flow になります。単一の値は従来のキーワードとして維持されます。Chrome 安定版に移行すると、複数の値がすべてのエンジンで使用できるようになります。

Chrome 115 では、Web アニメーション仕様への ScrollTimeline 拡張と ViewTimeline 拡張も導入されています。これらのプロパティを使用すると、CSS や JavaScript によるスクロールドリブン アニメーションが可能になります。

Firefox 114 には WebTransport API が含まれています。これは、WebSockets の最新のアップデートであり、複数のストリーミング、単方向のストリーミング、順序外配信をサポートしています。

ウェブ初心者向けシリーズの一部