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: Cookies Having Independent Partitioned State

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

Popover API

Chrome 114 では、ポップオーバー 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 の最新のアップデートであり、複数のストリーミング、単方向のストリーミング、順序外配信をサポートしています。

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