2 月にウェブ プラットフォームを導入

2022 年 2 月に Stable 版とベータ版のウェブブラウザでリリースされた興味深い機能の一部をご紹介します。

Rachel Andrew

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

2 月に、Chrome 98 と Firefox 97 が安定版になりました。

Chrome 98 では、self.structuredClone メソッドがリリースされました。構造化クローン アルゴリズムを使用して値のディープ クローンを作成します。structuredClone() の詳細

対応ブラウザ

  • Chrome: 98。
  • Edge: 98.
  • Firefox: 94。
  • Safari: 15.4。

ソース

Firefox 97 には Cascade Layers が含まれています。@layer ルールでカスケード レイヤを定義すると、特異性を制御できます。

@layer framework {
  /* creates a new layer named framework */
}

Firefox は、このリリースで最初に導入されたブラウザです。ただし、この機能はまもなくすべての地域で利用可能になる予定ですので、この投稿のベータ版リリースに関するセクションをご確認ください。カスケード レイヤの詳細については、カスケード レイヤがブラウザに登場をご覧ください。

対応ブラウザ

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4。

ソース

Firefox では、scrollbar-gutter プロパティもリリースされます。このプロパティは、コンテンツの拡大に伴ってスクロールバーが表示されることによるレイアウト シフトを除去するのに役立ちます。

スクロールバーのガターは、内側の枠線と外側のパディング端の間のスペースです。必要に応じて、ここにスクロールバーが表示されます。スクロールバーがない場合、ガターはパディングの延長として表示されます。次の CSS では、ボックスの両側にスクロールバーのサイズを考慮したスペースを追加して、外観を左右対称に保ちます。

.container {
  scrollbar-gutter: stable both-edges;
}

対応ブラウザ

  • Chrome: 94。
  • Edge: 94。
  • Firefox: 97。
  • Safari Technology Preview: サポートされています。

ソース

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 のベータ版が安定版になり次第、すべての常時ブラウザでご利用いただけるようになる予定です。

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

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