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 ハードウェアへのアクセスのオーバーヘッドの低減、単一のグラフィック デバイスから複数のキャンバスへのレンダリング、より優れた予測可能なパフォーマンスなどの最新機能を提供します。
ファーストパーティ セット
ファーストパーティ セット(FPS)は、プライバシー サンドボックスの一部です。組織がサイト間の関係を宣言して、ブラウザがセット内のサイトに対して制限付きのサードパーティ Cookie のアクセスを許可するタイミングを決定できるようにする方法です。FPS は Chrome 113 で段階的な公開を開始しました。
CSS メディア特性など
CSS の場合、Chrome 113 には overflow-inline
メディア特性と overflow-block
メディア特性が含まれています。
update
メディア機能。
イージング関数 linear()
も含まれています。詳しくは、linear()
イージング関数を使用して CSS で複雑なアニメーション カーブを作成するをご覧ください。
対応ブラウザ
CSS カラーレベル 4 の機能
Firefox 113 には、color()
、lab()
、lch()
、oklab()
、oklch()
、color-mix()
の機能表記と、forced-color-adjust プロパティが追加されました。つまり、新しいカラースペースと関数が、3 つの主要なエンジンすべてでサポートされるようになりました。これらの色空間と関数の詳細については、高解像度 CSS の色ガイドをご覧ください。
:nth-child()
の選択をより細かく制御
Firefox 113 では、セレクタリストを :nth-child()
と nth-last-child()
に渡す機能も追加されています。詳しくは、of S 構文を使用して :nth-child() の選択をより細かく制御するの投稿で例をご覧ください。
対応ブラウザ
Compressions Streams 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
を使用できます。これにより、見出しのバランスをとることができ、最後の行に単一の単語が残る問題を回避し、より見やすく読みやすい結果を得ることができます。詳しくは、CSS text-wrap: balance をご覧ください。
CHIPS: Cookie の独立パーティション分割状態
サードパーティ Cookie の段階的廃止の一環として、CHIPS では、新しい Cookie 属性 Partitioned
を使用して、トップレベル サイトごとにパーティショニングされたサードパーティ Cookie をオプトインできます。CHIPS は Chrome 114 で利用できます。
Popover API
また、Chrome 114 では Popover API が追加され、他のすべてのウェブアプリ UI の上に表示される一時的なユーザー インターフェース(UI)要素を簡単に作成できるようになりました。
これには、アクション メニュー、フォーム要素の候補、コンテンツ選択ツール、教育 UI などのユーザー インタラクティブ要素が含まれます。
新しいポップオーバー属性を使用すると、任意の要素を最上位レイヤに自動的に表示できます。つまり、開発者は要素の配置、要素の重ね合わせ、フォーカス、キーボード操作について心配する必要がなくなります。
詳しくは、ポップオーバー API の概要をご覧ください。
ベータ版ブラウザのリリース
ブラウザのベータ版では、ブラウザの次期安定版に搭載される機能のプレビューを確認できます。リリース前に、サイトに影響する可能性がある新機能や削除をテストできます。新しいベータ版は、Firefox 114、Chrome 115、Safari 16.6 です。このリリースにより、プラットフォームに数多くの優れた機能が追加されます。詳細についてはリリースノートをご覧ください。主な内容の一部だけをご紹介します。
Chrome 115 では、CSS display
プロパティに複数の値が含まれています。つまり、display: flex
は display: block flex
に、display: block
は display: block flow
になります。単一の値は従来のキーワードとして維持されます。Chrome 安定版に移行すると、複数の値がすべてのエンジンで使用できるようになります。
Chrome 115 では、Web アニメーション仕様への ScrollTimeline
拡張と ViewTimeline
拡張も導入されています。これらのプロパティを使用すると、CSS や JavaScript によるスクロールドリブン アニメーションが可能になります。
Firefox 114 には WebTransport API が含まれています。これは、WebSockets の最新のアップデートであり、複数のストリーミング、単方向のストリーミング、順序外配信をサポートしています。
ウェブ初心者向けシリーズの一部