2022 年 1 月に Stable 版とベータ版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
1 月に Chrome 97 と Firefox 96 が安定版になりました。
Firefox 96 では、color 関数 hwb() が提供されています。この関数は、色相、白色、黒さで色を表現します。
Firefox 96 では、CSS の color-scheme プロパティも導入されています。このプロパティを使用すると、要素をレンダリングできるカラーパターンを指定できます。たとえば、.widget をオペレーティング システムのライトモードまたはダークモードでレンダリングできることを示すには、次の CSS を使用します。
.widget {
color-scheme: light dark;
}
カラーパターンが Firefox で採用されたことにより、このプロパティは Chrome、Firefox、Safari で利用できます。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。
1 月のベータ版は Chrome 98、Firefox 97、Safari 15.4 Beta 1 です。
Chrome 98 では、新たなフォント形式として COLRv1 カラー グラデーション ベクター フォントがサポートされます。カラーフォントには、絵文字、国旗、色とりどりの文字など、複数の色のグリフが含まれます。
この新しいフォント形式について詳しくは、Chrome 98 の COLRv1 カラー グラデーション ベクター フォントをご覧ください。
また、オブジェクトのディープコピーを作成するための structuredClone() メソッドと、CSS メディアクエリ dynamic-range と video-dynamic-range も含まれています。テストする機能について詳しくは、Chrome 98 ベータ版の投稿をご覧ください。
Chrome 98 DevTools には、新しいフル ユーザー補助ツリーなど、さまざまな新機能が搭載されています。
Firefox 97 Beta では、length の cap と ic のユニットがサポートされており、scrollbar-gutter プロパティも実装されています。
Safari 15.4 Beta には、さまざまな便利な機能が含まれています。機能には、::backdrop 疑似要素、:focus-visible 疑似クラス、accent-color プロパティ、contains プロパティを指定した CSS Containment の実装などがあります。このベータ版では、HTML の <dialog> 要素、画像の lazy 属性により遅延読み込みが可能になります。また、ウェブアプリ マニフェスト アイコンもサポートされています。
これらのベータ版機能はすべて、まもなく安定版のブラウザに組み込まれる予定です。