Web制作者は要チェック！ iframeのレスポンシブなサイズ調整など、Chrome 154で新しく追加された7つのCSSの機能

Post on:2026年9月29日

sponsorsr

先週アップデートされたChrome 154に追加された、CSSとUIに関する新しい機能を紹介します。

今回のアップデートで注目すべきは、iframeがレスポンシブなサイズ調整が可能になり、text-decoration-insetやtext-decoration-skip-spacesなどの新しいプロパティなど、Web制作者は要チェックです！

New in Chrome 154
Chrome 154 beta

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

はじめに
レスポンシブなサイズ調整が可能なiframe要素
scroll-marker-groupプロパティの拡張
text-decoration-insetプロパティ
text-decoration-skip-spacesプロパティ
CSSStyleValue階層をワーカーコンテキストに公開する
FontFaceのwidth属性とfont-width記述子
ポップオーバーとダイアログの「ライトディミス」の改善

はじめに

9/24にリリースされたChrome 154で7個のCSSとUIに関する新しい機能が追加されました。対象となるChrome 154は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その7個の新しいCSSとUIに関する機能を紹介します。

レスポンシブなサイズ調整が可能なiframe要素

Chrome 154では、レスポンシブなサイズ調整が可能なiframeが利用できるようになりました。

これにより、親ドキュメント内のiframe要素のサイズがiframe内のドキュメントのレイアウトオーバーフローサイズに合わせて自動的に調整され、子ドキュメントでのスクロール発生を防ぐことができます。<

iframeのサイズをコンテンツの高さに合わせるには、frame-sizingプロパティを設定します。

<style>
  .embed {
    width: 100%;
    frame-sizing: content-height;
  }
</style>
<iframe class="embed" src="/comments.html" title="Comments">
</iframe>

<style>

.embed {

width: 100%;

frame-sizing: content-height;

}

</style>

</iframe>

さらに、埋め込まれるドキュメントのhead内にresponsive-embedded-sizingを設定する必要があります。

<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing" content="allow-origins=*">
  </head>
  <body>
    ...
  </body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

...

</body>

</html>

これで、iframeは固定高さのビューポートのように動作する代わりに、埋め込まれたドキュメントのコンテンツの高さを使用できるようになります。

この新しいframe-sizingプロパティは、以下の値をサポートしています。

frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;

frame-sizing: auto;

frame-sizing: content-width;

frame-sizing: content-height;

frame-sizing: content-inline-size;

frame-sizing: content-block-size;

実際の動作はデモページをご覧ください。
「Comments」のセクションがiframeです。

See the Pen
レスポンシブなサイズ調整が可能なiframe要素 by coliss (@coliss)
on CodePen.

scroll-marker-groupプロパティの拡張

CSSのscroll-marker-groupプロパティが拡張され、以下のモードがサポートされるようになりました。

links: 生成された::scroll-marker-groupはlinksモードで動作し、ナビゲーションリストのように機能します。このモードは設定がない場合のデフォルトです。
tabs: 生成された::scroll-marker-groupはtabsモードで動作し、タブリストのように機能します。

/* Linksモード (default) */
scroll-marker-group: after links;

/* Tabsモード */
scroll-marker-group: before tabs;

/* Linksモード (default) */

scroll-marker-group: after links;

/* Tabsモード */

scroll-marker-group: before tabs;

これら各モードはWAI-ARIAのパターンに従って、::scroll-marker-groupおよび::scroll-markerのフォーカス順序やアクセシビリティの挙動が変更されます。

Linksモード（デフォルト）: 標準的なナビゲーションのランドマークとフラグメントアンカーを組みあせた動作を制限します。::scroll-marker-groupはナビゲーションの役割を担い、::scroll-marker要素はリンクの役割を担います。すべての::scroll-marker要素は連続したタブストップとなります。リンクマーカーがアクティブになると、フォーカスはターゲット要素に移動します。
Tabsモード: タブのパターンを再現し、タブ付きカルーセルの基盤として機能します。::scroll-marker-groupにはtablistの役割が付与され、::scroll-marker要素はtabロールとして機能し、元の要素にはtabpanelロールが割り当てられます。アクティブな::scroll-markerのみがタブストップとして機能し、矢印キーでマーカー間を移動することもできます。非アクティブなタブのコンテンツは、アクセシビリティツリーからは非表示になります。

text-decoration-insetプロパティ

CSSのtext-decoration-insetプロパティは、下線・上線・取り消し線といった装飾がテキストの端からどれだけ内側にオフセットされるか（あるいは外側にはみ出すか）を制御します。このプロパティはautoをはじめ、長さ、パーセントの値をサポートしており、開始位置と終了位置のオフセットを個別に設定するための1つあるいは2つの値を設定する構文も利用できます。

このプロパティにより、デベロッパーは装飾の間隔を調整したり、背景グラデーションや追加の要素を使用せずに、ネイティブなテキスト装飾を用いてリビール効果を作成することもできます。

たとえば、両端を10px内側に寄せる場合は下記のようになります。

h1 {
  text-decoration-inset: 10%;
}

h1 {

text-decoration-inset: 10%;

}

text-decoration-skip-spacesプロパティ

CSSのtext-decoration-skip-spacesプロパティは、テキストの装飾線（下線・上線・取り消し線など）を空白文字で途切れさせるかどうかを制御します。これにより、空白の下に装飾線が描画されることを防ぐことができます。

CSSStyleValue階層をワーカーコンテキストに公開する

CSS Typed OM Level 1の仕様では、CSSStyleValue階層をワーカーのグローバルスコープに公開することになっています（[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]。しかし、これまでのBlinkの実装では、CSSStyleValue, CSSKeywordValue, CSSNumericValue, CSSUnitValue, CSSUnparsedValueのみがWindowsとWorkletに対して公開されていました。その結果、ワーカーコンテキストではこれらのコンストラクタが未定義の状態になっていました。

Chrome 154では、仕様および他のブラウザエンジンとの整合性を考慮して、ワーカー内でもこれらのコンストラクタが公開されるようになります。

FontFaceのwidth属性とfont-width記述子

FontFaceのwitdh属性および@font-faceのfont-width記述子をそれぞれstretchおよびfont-stretchのエイリアスとして公開します。

これにより、CSS Font Loading Module Level 3とCSS Fonts Module Level 4の仕様にChromiumは準拠することになります。FontFace.widthやCSSのfont-widthを使用して、フォントの幅を確認または初期化できます。これらはstretchおよびfont-stretchと互換性があります。

ポップオーバーとダイアログの「ライトディミス」の改善

「ライトディミス」とは、ポップオーバーやダイアロルの外側をクリックすることで、それらが閉じられる動作をすることです。Chrome 154では、この領域外をクリックすることで閉じる動作（ライトディミス）が改善、簡素化されました。今回の改善により、タッチスクリーンでのスクロールジェスチャーや右クリックによって「ライトディミス」が誤動作することはなくなります。

ブラウザは「ライトディミス」をトリガーする際に、pointerdownイベントとpointerupイベントの組み合わせの代わりに、clickイベントを使用できるようになりました。