Chrome 154 がリリースされた。埋め込み文書の内容サイズに合わせて iframe をサイズする frame-sizing、scroll-marker-group の links / tabs モード、テキスト装飾の始終点をずらす text-decoration-inset が含まれる。

#レスポンシブサイズの iframe

親文書の iframe が埋め込み文書の内容サイズに合わせて自身をサイズする。子文書側のスクロールを避け、postMessage() で寸法を往復して高さを更新する手順を置き換える。

埋め込み側は responsive-embedded-sizing の meta でオプトインする。読み込み後の動的追加では効かない。クロスオリジンでは allow-origins で許可オリジンを制限できる。初回レイアウト後に内容が変わったときは、埋め込み文書から window.requestResize() を呼ぶ。

html
<style>
  .embed {
    width: 100%;
    frame-sizing: content-height;
  }
</style>
<iframe class="embed" src="/comments.html" title="Comments"></iframe>
html
<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing" content="allow-origins=*">
  </head>
  <body>
    ...
  </body>
</html>
js
async function loadMore() {
  const items = await fetchMoreItems();
  renderItems(items);
  window.requestResize();
}

frame-sizing の値は auto、content-width、content-height、content-inline-size、content-block-size。max-height などの制約と併用できる。埋め込みの読み込み後に高さが変わると、先頭ビューポートではレイアウトシフトになりうる。

#CSS scroll-marker-group モード

scroll-marker-group は、スクロールコンテナが ::scroll-marker-group を内容の前か後に生成するかを決める。Chrome 154 では links と tabs を加え、::scroll-marker-group と ::scroll-marker のフォーカス順と WAI-ARIA セマンティクスを切り替える。

links（省略時の既定）はグループが navigation、各マーカーが link。すべてのマーカーがタブストップになり、選択するとフォーカスは対象要素へ移る。tabs はグループが tablist、マーカーが tab、生成元が tabpanel。アクティブなマーカーだけがタブストップで、矢印キーで移動する。非アクティブなタブの内容はアクセシビリティツリーから隠れ、選択後もフォーカスはマーカーに残る。

html
<div class="carousel">
  <section>1</section>
  <section>2</section>
  <section>3</section>
</div>
css
.carousel {
  overflow-x: auto;
  scroll-marker-group: after links;
}

.carousel > section::scroll-marker {
  content: " ";
}

.tabs {
  overflow-x: auto;
  scroll-marker-group: before tabs;
}

#CSS text-decoration-inset

下線・上線・打ち消し線の始終点を、テキストの端から内側へ縮める、外側へ伸ばす、またはずらす。値は auto、長さ、パーセント。1 値は両端、2 値は始点と終点。正の値は短縮、負の値は延長。背景グラデーションや余分な要素なしで、装飾の余白調整や下線の段階表示に使える。auto は隣接する装飾ボックスの下線が一本に見えないよう、ブラウザが隙間を空ける。

css
.short {
  text-decoration: underline;
  text-decoration-inset: 10px;
}

.shift {
  text-decoration: underline wavy 2px;
  text-decoration-inset: 1em -1em;
}

#参考文献