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 つの主要なブラウザ エンジン間で相互運用が可能になりました。

大、小、動的ビューポート ユニットを確認する。

contain-intrinsic-size の省略形 CSS プロパティは、長い形式の contain-intrinsic-width、contain-intrinsic-height、論理プロパティの contain-intrinsic-block-size と contain-intrinsic-inline-size とともに、Firefox 107 でサポートされています。

これらは、サイズ制限の対象となる 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）があります。クエリ コンテナのサイズを基準とした長さの単位です。

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