2022 年 11 月に Stable 版とベータ版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
11 月に Firefox 107、Chrome 108 が安定版になりました。これがウェブ プラットフォームにとってどのような意味を持つのかを見ていきましょう。
Android 版 Chrome でのレイアウト ビューポートの動作の変更
Android 版 Chrome 108 以降、画面キーボードが表示されたときのレイアウト ビューポートの動作が変更されています。詳しくは、Android 版 Chrome で予定されているビューポートのサイズ変更動作の変更に備えるをご覧ください。
新しいビューポート ユニット
また、Chrome 108 には、新しい CSS ビューポート ユニットもあります。これには、小（svw、svh、svi、svb、svmin、svmax）、大（lvw、lvh、lvi、lvb、lvmin、lvmax）、動的（dvw、dvh、dvi、dvb、dvmin、dvmax）、論理（vi、vb）単位が含まれます。これらのユニットは、Firefox と Safari にすでに実装されているため、これらのユニットの 3 つの主要なブラウザ エンジンの相互運用が可能になりました。
ビューポートの大、小、動的なユニットをご覧ください。
対応ブラウザ
- 108
- 108
- 101
- 15.4
Firefox 107 では、省略形の contain-intrinsic-width、contain-intrinsic-height、論理プロパティ contain-intrinsic-block-size、contain-intrinsic-inline-size とともに、短縮型 CSS プロパティ contain-intrinsic-size がサポートされています。
これらは、サイズ包含の対象となる UI 要素のサイズを指定するために使用されます。これにより、ユーザー エージェントは子要素をレンダリングすることなく要素のサイズを判断できます。これらは、要素がサイズ包含の対象となる場合に便利です。
CSS の断片化の avoid キーワードのサポート
Chrome 108 では、印刷時の CSS 断片化プロパティ break-before、break-after、break-inside の avoid 値がサポートされるようになりました。この値により、ブラウザは適用先の要素の前、後、または内部で互換性が損なわれないようにすることができます。たとえば、次の CSS では、改ページによって図が壊れないようにしています。
figure {
break-inside: avoid;
}
この追加は、LayoutNG を使用した印刷のサポートにより、最新のバグが少ないというメリットをもたらします。LayoutNG の詳細を確認する。
Federated Credential Management API
Federated Credential Management API（FedCM）は、ウェブ上のフェデレーション ID フローを抽象化します。ブラウザを介するダイアログが表示されます。このダイアログにより、ユーザーは ID プロバイダからアカウントを選択してウェブサイトにログインできます。FedCM は Chrome 108 でリリースされます。詳細については、FedCM に関するお知らせのブログ投稿をご覧ください。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。リリース日の関係上、今月の新しいベータ版は Firefox 108 のみで、Safari 16.2 ベータ版は現在も継続中です。
Firefox 108 では、<source> 要素が <picture> 要素の子である場合、その要素の height 属性と width 属性がサポートされます。これらの属性では、画像の高さまたは幅をピクセル単位で整数で指定します。
Firefox では現在、コンテナクエリが実装されています。Firefox 108 ベータ版の layout.css.container-queries.enabled フラグの後ろには、コンテナのクエリの長さの単位があります（cqw、cqh、cqi、cqb、cqmin、cqmax）。クエリコンテナのサイズを基準とした長さの単位です。