11 月にリリースされたウェブ プラットフォームの新機能

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

Rachel Andrew

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

11 月には、Firefox 107 と Chrome 108 が安定版になりました。これがウェブ プラットフォームに与える影響を見ていきましょう。

Android 版 Chrome の Layout Viewport の動作の変更

Android 版 Chrome 108 以降では、画面キーボードが表示されたときの Layout Viewport の動作が変更されています。詳しくは、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 つの主要なブラウザ エンジン間で相互運用が可能になりました。

大、小、動的なビューポート ユニット

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）があります。クエリ コンテナのサイズを基準とした長さの単位です。

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