公開日: 2026 年 9 月 22 日
Chrome 154 がリリースされました。この投稿では、このリリースの主な機能を紹介します。Chrome 154 のリリースノート全文をご覧ください。
このリリースのハイライトは次のとおりです。
- レスポンシブ サイズの
<iframe>を使用すると、<iframe>は埋め込みドキュメントの固有サイズに基づいてサイズを調整できます。 - CSS
scroll-marker-groupモードでは、スクロール マーカーのフォーカス順序とユーザー補助機能のセマンティクスを構成するためのlinksモードとtabsモードが追加されています。 - CSS
text-decoration-insetを使用すると、テキスト装飾の開始点と終了点を調整できます。
レスポンシブ サイズの <iframe>
Chrome 154 では、レスポンシブ サイズの iframe のサポートが追加されました。これにより、親ドキュメントの <iframe> 要素が埋め込みドキュメントのレイアウト オーバーフロー サイズに合わせてサイズ調整されるため、子ドキュメントでのスクロールが回避されます。これは、iframe コンテンツを手動で測定し、postMessage() でディメンションを送信し、埋め込みページの iframe サイズを更新するパターンを置き換えるものです。
iframe のサイズをコンテンツの高さに合わせるには、埋め込みページの <iframe> 要素で frame-sizing CSS プロパティを使用します。
.embed {
width: 100%;
frame-sizing: content-height;
}
埋め込みドキュメントも、<head> に <meta name="responsive-embedded-sizing"> 要素を含めることでオプトインする必要があります。
<meta name="responsive-embedded-sizing" content="allow-origins=*">
詳しくは、Chrome 154 のレスポンシブ iframe をご覧ください。
CSS scroll-marker-group モード
scroll-marker-group プロパティは、スクロール コンテナがコンテンツの前後に ::scroll-marker-group 疑似要素を生成するかどうかを制御します。Chrome 154 では、::scroll-marker-group と ::scroll-marker のフォーカス順序と WAI-ARIA アクセシビリティ セマンティクスを設定する 2 つのモードで scroll-marker-group が強化されています。
/* Links mode (default) */
scroll-marker-group: after links;
/* Tabs mode */
scroll-marker-group: before tabs;
CSS text-decoration-inset
デフォルトでは、要素のテキスト装飾（下線、上線、取り消し線など）は、レンダリングされたテキストと同じ長さになります。text-decoration-inset CSS プロパティを使用すると、要素のテキスト装飾の開始点と終了点を調整して、テキスト実行の端から内側に配置したり、外側に拡張したり、相対的にシフトしたりできます。
text-decoration-inset は、1 つの値または 2 つの値の構文を使用して、auto、長さ、パーセンテージの値を受け入れます。たとえば、両端を 10 ピクセル内側に設定するには:
text-decoration-inset: 10px;
正の値は装飾をインセット（短く）し、負の値は装飾をアウトセット（長く）します。これにより、装飾の間隔を微調整し、背景グラデーションや追加の要素ではなく、CSS テキスト装飾を使用して下線のアニメーション表示効果を作成できます。
詳細については、MDN の text-decoration-inset ドキュメントをご覧ください。
関連情報
ここでは、主なハイライトの一部のみを紹介します。Chrome 154 のその他の変更については、以下のリンクをご覧ください。
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびにメール通知が届きます。X または LinkedIn で Google をフォローして、新しい記事やブログ投稿を入手することもできます。
Chrome 155 がリリースされ次第、Chrome の新機能についてお知らせします。