Chrome 154 is rolling out now ⬇️ https://t.co/rteT1QOjaQ
— Chrome for Developers (@ChromiumDev) September 23, 2026
出典：X（@ChromiumDev）
Chrome for Developersは、展開中のChrome 154について、主な新機能を紹介しました。この記事では、埋め込まれる文書に応じたiframeのサイズ調整と、2つのCSS機能を整理します。
- iframeを埋め込まれる文書の内容に応じた高さに調整できる
- scroll-marker-groupに、フォーカス順序とアクセシビリティ上の意味を設定するモードが追加された
- text-decoration-insetで、下線などの開始位置と終了位置を調整できる
iframeをコンテンツに応じた高さに調整
Chrome 154では、<iframe>が埋め込まれる文書のレイアウトのオーバーフローサイズに応じて、自身のサイズを調整できるようになりました。子文書内でのスクロールを避けるために、コンテンツの寸法を手動で測定し、postMessage()で親ページへ伝えてiframeのサイズを更新する方法に代わるものです。
コンテンツの高さに合わせるには、埋め込み元ページの<iframe>にframe-sizingを指定します。
.embed {
width: 100%;
frame-sizing: content-height;
}埋め込まれる文書側でも、<head>に次の要素を追加する必要があります。
<meta name="responsive-embedded-sizing" content="allow-origins=*">scroll-marker-groupに2つのモード
scroll-marker-groupは、スクロールコンテナーが::scroll-marker-group疑似要素をコンテンツの前後どちらに生成するかを制御するプロパティです。Chrome 154では、::scroll-marker-groupと::scroll-markerのフォーカス順序およびWAI-ARIAのアクセシビリティ上の意味を設定する、linksとtabsのモードが追加されました。
/* linksモード（デフォルト） */
scroll-marker-group: after links;
/* tabsモード */
scroll-marker-group: before tabs;text-decoration-insetで装飾の長さを調整
text-decoration-insetは、下線・上線・取り消し線などのテキスト装飾について、開始位置と終了位置を調整するCSSプロパティです。装飾をテキストより短くしたり、外側へ伸ばしたり、位置をずらしたりできます。
auto、長さ、パーセント値を指定でき、値は1つまたは2つ使用できます。たとえば、両端を10pxずつ内側にする指定は次のとおりです。
text-decoration-inset: 10px;正の値では装飾が短くなり、負の値では長くなります。Chrome for Developersは、装飾の間隔の微調整に加え、背景のグラデーションや追加要素を使わずに下線が現れるアニメーションを作る用途も紹介しています。
