2023 年 5 月に Stable 版と Beta 版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2023 年 5 月に、Firefox 113、Chrome 113、Chrome 114、Safari 16.5 が安定版になりました。これがウェブ プラットフォームにとってどのような意味を持つのかを見ていきましょう。
WebGPU
Chrome 113 には、ウェブ用の WebGL および WebGL 2 グラフィック API の後継である WebGPU が含まれています。GPU コンピューティング、GPU ハードウェアへのオーバーヘッド アクセスの低減、1 つのグラフィック デバイスから複数のキャンバスへのレンダリング機能、優れた予測可能なパフォーマンスなど、最新の機能を提供します。
ファーストパーティ セット
ファーストパーティ セット（FPS）はプライバシー サンドボックスの一部です。ブラウザは、セット内のサイトに対してサードパーティ Cookie のアクセスを限定して許可するタイミングを決定できるよう、組織がサイト間の関係を宣言するための手段です。FPS は Chrome 113 で段階的な公開を開始しました。
CSS メディア機能など
CSS については、Chrome 113 には overflow-inline と overflow-block のメディア機能が含まれています。
update メディア機能。
また、linear() イージング関数も含まれています。詳細については、CSS で linear() イージング関数を使用して複雑なアニメーション曲線を作成するをご覧ください。
対応ブラウザ
- 113
- 113
- 112
- 17.2
CSS のカラーレベル 4 の機能
Firefox 113 には、forced-color-adjust プロパティとともに、color()、lab()、lch()、oklab()、oklch()、color-mix() の機能表記があります。つまり、新しい色空間と関数は、3 つの主要なエンジンすべてでサポートされることになります。これらの色空間と関数について詳しくは、高精細 CSS カラーガイドをご覧ください。
:nth-child() の選択をより詳細に制御
Firefox 113 では、セレクタリストを :nth-child() と nth-last-child() に渡す機能も追加されています。詳細と例については、S 構文を使用した :nth-child() の選択の詳細な制御の投稿をご覧ください。
対応ブラウザ
- 111
- 111
- 113
- 9
圧縮ストリーム API
Firefox 113 に組み込まれたことで、3 つの主要なエンジンすべてでサポートされるようになった Compressions Streams API は、ストリームの圧縮と解凍を可能にします。つまり、JavaScript アプリケーションで圧縮ライブラリをバンドルする必要がなくなります。
CSS のネスト
Safari 16.5 では問題の大部分が解決されましたが、CSS ネストのサポートも追加されています。新しいネスト セレクタ > は、プリプロセッサを使用したデベロッパーにとって馴染みのある方法で、関連するスタイルルールをネストするために使用されます。
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
広告見出しとtext-wrap: balanceのバランスを取る
Chrome 114 以降では、text-wrap: balance を使用できます。これにより、見出しのバランスを取り、最終行に 1 つの単語が表示されるという問題を回避し、より楽しく読みやすい文章にすることができます。詳しくは、CSS の text-wrap: 残高をご覧ください。
CHIPS: Cookie の独立したパーティション化状態
サードパーティ Cookie の段階的廃止の取り組みの一環として、CHIPS では、新しい Cookie 属性 Partitioned を使用して、トップレベル サイトごとに分割されるサードパーティ Cookie のオプトインが可能になりました。CHIPS は Chrome 114 で利用できます。
Popover API
また、Chrome 114 には Popover API があり、他のすべてのウェブアプリ UI の上に表示される一時的なユーザー インターフェース（UI）要素を簡単に作成できます。
これには、アクション メニュー、フォーム要素の候補、コンテンツ選択ツール、教育用 UI など、ユーザー インタラクティブ要素が含まれます。
新しい POPover 属性を使用すると、任意の要素を最上位レイヤに自動的に表示できます。つまり、デベロッパーは、配置、要素の積み重ね、フォーカス、キーボード操作について心配する必要がなくなります。
詳しくは、Popover API の概要をご覧ください。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。新しいベータ版は Firefox 114、Chrome 115、Safari 16.6 です。これらのリリースは、プラットフォームに多くの優れた機能をもたらします。主な内容については、リリースノートをご覧ください。
Chrome 115 では、CSS display プロパティに複数の値が設定されています。つまり、display: flex は display: block flex に、display: block は display: block flow になります。1 つの値は従来のキーワードとして維持されますが、Chrome の Stable 版では、すべてのエンジンで複数の値を使用できるようになります。
また、Chrome 115 では、Web Animations の仕様に ScrollTimeline と ViewTimeline の拡張機能が追加されています。これにより、CSS や JavaScript によるスクロールドリブン アニメーションが可能になります。
Firefox 114 には、WebSocket の最新のアップデートである WebTransport API が含まれており、複数のストリーム、単方向ストリーム、順不同の配信をサポートします。