1 月のウェブ プラットフォームの新機能

2022 年 1 月に Stable 版とベータ版のウェブブラウザに導入された興味深い機能をご紹介します。

Rachel Andrew

ブラウザの安定版リリース

1 月に Chrome 97 と Firefox 96 が安定版になりました。

Firefox 96 には、カラー関数 hwb() が搭載されています。この関数は、色相、白色、黒度で色を表現します。

対応ブラウザ

  • Chrome: 101。
  • Edge: 101。
  • Firefox: 96.
  • Safari: 15。

ソース

Firefox 96 には、CSS の color-scheme プロパティも追加されています。このプロパティを使用すると、要素をレンダリングできるカラーパターンを指定できます。たとえば、.widget をオペレーティング システムのライトモードまたはダークモードでレンダリングできることを示すには、次の CSS を使用します。

.widget {
  color-scheme: light dark;
}

color-scheme が Firefox にリリースされたため、このプロパティは Chrome、Firefox、Safari で使用できるようになりました。

対応ブラウザ

  • Chrome: 81。
  • Edge: 81。
  • Firefox: 96.
  • Safari: 13。

ソース

ベータ版ブラウザのリリース

ベータ版のブラウザでは、ブラウザの次の安定版で提供される内容をプレビューできます。リリース前に、サイトに影響する可能性がある新機能や削除をテストできます。

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 ベータ版では、length の cap 単位と ic 単位がサポートされ、scrollbar-gutter プロパティも実装されています。

Safari 15.4 ベータ版には、さまざまな新機能が含まれています。たとえば、::backdrop 疑似要素、:focus-visible 疑似クラス、accent-color プロパティ、Contain プロパティを持つ CSS Containment を実装できます。このベータ版には、HTML の <dialog> 要素、画像の lazy 属性（遅延読み込みを有効にするため）、ウェブアプリ マニフェスト アイコンのサポートも含まれています。

これらのベータ版機能はまもなく安定版のブラウザに導入される予定です。

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