2022 年 2 月に Stable および Beta 版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2 月に Chrome 98 と Firefox 97 が安定版になりました。
Chrome 98 では、self.structuredClone メソッドが導入されました。構造化クローン アルゴリズムを使用して、値のディープ クローンを作成します。structuredClone() の詳細をご確認ください。
Firefox 97 にはカスケード レイヤが含まれています。@layer at ルールはカスケード レイヤを定義し、特異性の制御に役立ちます。
@layer framework {
/* creates a new layer named framework */
}
Firefox は、このバージョンをリリースした最初のブラウザです。すぐにご利用いただけるようになる前に、ベータ版リリースに関するこちらの投稿のセクションをご覧ください。カスケード レイヤについて詳しくは、ブラウザにカスケード レイヤが登場をご覧ください。
Firefox でも scrollbar-gutter プロパティが提供されます。このプロパティを使用すると、コンテンツの拡大に伴って表示されるスクロールバーによるレイアウト シフトを回避できます。
スクロールバーのガターは、内側の境界線と外側のパディング エッジの間のスペースです。必要に応じて、ここにスクロールバーが表示されます。スクロールバーがない場合、ガターはパディングの延長として表示されます。次の CSS では、スクロールバーのサイズを考慮してボックスの両側にスペースを追加し、外観を対称に保つことができます。
.container {
scrollbar-gutter: stable both-edges;
}
Chrome 98 では、新たなフォント形式として COLRv1 カラー グラデーション ベクター フォントがサポートされます。カラーフォントには、絵文字、国旗、色とりどりの文字など、複数の色のグリフが含まれます。
この新しいフォント形式について詳しくは、Chrome 98 の COLRv1 カラー グラデーション ベクター フォントをご覧ください。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。
2 月にベータ版としてリリースされたのは、Chrome 99 と Firefox 98 です。Safari ベータ版 15.4 は現在も開発中であるため、先月で内容の一部を説明しました。
Chrome 99 にはカスケード レイヤが搭載されています。また、Safari ベータ版 15.4 にもカスケード レイヤが搭載されています。この機能は近日中にすべてのブラウザでご利用いただけるようになる予定です。
また、Chrome 99 では、CanvasRenderingContext2D の新しい属性と、日付、時刻、色、ファイルのブラウザ選択ツールを表示するための新しい showPicker() メソッドが HTMLInputElement に追加されました。
Firefox 98 には <dialog> 要素があります。Firefox と Safari のベータ版が安定版になったら、すべてのブラウザに搭載されるもう 1 つの機能です。
これらのベータ版機能はすべて、まもなく安定版のブラウザに組み込まれる予定です。